react router dom 설치

npm i react-router-dom

라우팅 하기

index.js

root.render(
    <BrowserRouter>
        <App />
  </BrowserRouter>
);

<App/>을 <BrowserRouter>로 감싸준다

여기서 'BrowserRouter' is not defined라는 에러를 만났는데

이는 import를 시켜주지 않아서 생긴 에러다.

import BrowserRouter from 'react-router-dom';

이렇게 import시켜주면 된다.

주소 “/”에 HomePage컴포넌트를 지정해주자

App.js

import './App.css';
import Footer from './components/footer';
import Header from './components/header';
import HomePage from './pages/homePage';
import { Route,Routes } from 'react-router-dom';

function App() {
 
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/home" exact={true} component={HomePage}/>
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

처음에 <Route>태그만 써서 “A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.”라는 에러를 만났다.

알고보니 ‘react-router-dom’이 버전 업데이트를 하면서 <Route>태그에는 <Routes>태그를 감싸주어야 제대로 작동한다고 한다.

<Routes>태그로 감싸주고 잘 작동되나 했더니 헤더와 푸터만 나오고 HomePage컴포넌트는 안보이는 현상이 나타났다.

“does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.”이런 에러인데… 검색해 보니

import './App.css';
import Footer from './components/footer';
import Header from './components/header';
import HomePage from './pages/homePage';
import { Route,Routes } from 'react-router-dom';

function App() {
 
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/home" exact={true} element={<HomePage/>}/>
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

component를 element로 바꿔주고, 중괄호 안에 jsx문법을 써주면 된단다…

버전이 바뀌면서 많은게 바뀐 모양…

헤더와 푸터 HomePage까지 잘나왔다.

이처럼 react는 원페이지로 동작하므로 a태그를 쓸 수 없는데

그 대안으로 라우팅을 사용하면 된다.