react-router-dom@6

설치

npm install react-router-dom@6

yarn add react-router-dom@6

사용

index.js

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>

app.js

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

<BrowerRouter>
  <Routes>
  	<Route path="/" element={<Home />} />
    /* nested routers */
    <Route path="/about" element={<About />}>
      <Route path="member" element={<div>member info</div>} />
      <Route path="location" element={<div>location info</div>} />
    </Route>
    <Route path="/detail/:id" element={<Detail />} />
    <Route path="/*" element={<NotFound />} />
  </Routes>
</BrowerRouter>

about.js

import { Outlet } from "react-router-dom";

<div>
  <h4>회사정보 페이지</h4>
  <Outlet></Outlet>
</div>

/about/member 로 들어올 시, About 화면도 보여지고 Outlet 부분에 member info 부분도 보여진다! /about/location 도 마찬가지..

++

• useHistory 대신 useNavigate

import { useNavigate } from 'react-router-dom';

  const navigate = useNavigate();
  navigate("/", state: { id: userId });

받을 때엔,

import { useLocation } from 'react-router-dom';

  const location = useLocation();
  const { id } = location.state;