[React] url 변경은 되지만 페이지 렌더링이 안되는 경우

NavBar에 5개의 메뉴를 설정해놔서 router-dom으로 페이지 이동이 되도록
설정했다.

React-router-dom이란?

React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리! history API를 사용하여 history 객체를 생성하는데,
history API는 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장해둔다고 생각하면 된다.
라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다!

NavBar.js

import { Link, Switch,Route} from "react-router-dom";

<div>

<ul style={menu}>
              <Link to="/brand">브랜드</Link>
              <Link to="/home">카페</Link>
              <Link to="/food">음식점</Link>
              <Link to="/brand">행사</Link>
              <Link to="/brand">커뮤니티</Link>
              {/* 다른 메뉴에 대한 Link 컴포넌트 추가 */}
            </ul>
 </div>

App.js

import './App.css';
import Main from './components/views/MainPage/MainPage'
import NavBar from './components/views/NavBar/NavBar';
import Footer from './components/views/Footer/Footer';
import BrandPage from './components/views/BrandPage/BrandPage'
import FoodPage from './components/views/FoodPage/FoodPage'
//import Home from './components/views/home/home'
import { BrowserRouter,Route ,Switch} from 'react-router-dom/cjs/react-router-dom.min';
import LoginPage from './components/views/LoginPage/LoginPage';

function App() {
  return (
    <>
      <div className="App">
        <header className="App-header">
          <NavBar />
          <BrowserRouter>
      <Route path="/" component={Main}/>
      <Route path="/brand" component={BrandPage} />
      <Route path="/food" component={FoodPage}/>
      <Route path="/login" component={LoginPage}/>
      </BrowserRouter>
        </header>
        <Footer />
      </div>
    </>
  );
}

export default App;

이렇게 App.js에는 BrowserRouter로 감싼다음 그 안에 Route 지정을 해주었다.

그럼 브랜드 메뉴를 클릭했을때 url이 '/brand'로 바뀌면서 페이지 내용도 브랜드페이지로 바뀌어야하는데 url만 바뀌고 페이지 내용은 '/'인 메인페이지 내용이 되는 것이다...
페이지 렌더링이 안되고 있다는 뜻...
enter를 눌러야만 페이지 전환 내용이 되는 것 이다 ㅠㅠ

그래서

 <Route exact path="/brand" component={BrandPage} />

exact도 넣어보고 component대신에 element로 지정도 해보고
import 문제가 있는 건지 .. 임시로 새페이지 만들어서 연결도 해보곤 했지만 묵묵부답..

어찌저찌 찾아보니 !!
BrowserRouter를 최상위 컴포넌트인 index.js에 한번만 설정해두는 것이 좋다는 글을 봤다. App.js보다 더 최상위인 index.js에 설정해둬야 하는것이다!!

App.js (변경 후)

function App() {
  return (
    <>
      <div className="App">
        <header className="App-header">
          <NavBar />
      <Route exact path="/" component={Main}/>
      <Route path="/brand" component={BrandPage} />
      <Route path="/food" component={FoodPage}/>
      <Route path="/login" component={LoginPage}/>
        </header>
        <Footer />
      </div>
    </>
    
  );
}

index.js

import { BrowserRouter } from 'react-router-dom/cjs/react-router-dom.min';

const rootNode = document.getElementById('root');

ReactDOM.createRoot(rootNode).render(
    <BrowserRouter>
      <React.StrictMode>
        <App/>
      </React.StrictMode>
    </BrowserRouter>
);