[React] Router 페이지 이동 시 렌더링 안됨. 문제 해결

React에서 Router와 Link to를 이용하여 페이지 이동을 구현하는 중, link 가 걸린 페이지로 이동시 url 변경은 되나 이동하고자 하는 페이지 렌더링이 안되는 상황을 마주했다. 😑

router-react-dom을 이용할 때 5.x 버전과 6.x 버전에서의 route 사용법이 다른데, 이 문제인가 싶었는데 버전 문제는 아니였다.
(나는 참고로 router-react-dom@5.3.0 버전을 사용하고 있다.)
문제는 index.js에서 BronwerRouter 태그로 전체를 감싸줘야 한다는 것.

❗️❗️❗️
나는 <React.StrinckMode>태그 안에 컴포넌트를 넣었기 때문에 렌더링이 되지 않았다.

💡💡💡
컴포넌트를 최상단 태그를 감싸주어야 렌더링이 된다.
이 BrouserRouter 컴포넌트는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해준다.

변경 전

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import './App.css';
//import Categories from './components/Categories';
import logo from "./img/logo.png"
import haeinsys_logo from "./haeinsys_logo.png";
import data from "./data.js";
import React, { useState } from "react";
import mainpage from "./img/mainpage.png"
import Card from "./card.js"
import { BrowserRouter, Route, Routes, Switch, Link } from "react-router-dom";

//컴포넌트 가져요기
import Home from './pages/Home';
import About from './pages/About';
import Techintroude from './pages/Techintroduce';
import Header from './Header/Header'
import community from './pages/community';

function App(){
  return(
    <div className='App'>
      <div>
      <Header/>
      <switch>
        <Route path = "/about" exact component={About}/>
        <Route path = "/community" exact component={community}/>
        </switch>
      </div>
      </div>
  );
}
export default App;

변경 후

index. js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </BrowserRouter>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();