리액트 라우터 돔 react-router-dom 설치 및 세팅

리액트 라우터 돔 react-router-dom 설치

npm install react-router-dom@6터미널

ndex.js에

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

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

 

브라우저 라우터 import 꼭해야함

app.js에서 route,routes,link,navigate,nested routes import하기

import { Routes, Route, Link } from "react-router-dom";
    <Link to="/detail">상세페이지</Link>
        <Routes>
    <Route path="/detail" element={<Detail />} />
      </Routes>

       <Nav.Link
              onClick={() => {
                navigate("/");
              }}>
              홈
            </Nav.Link>

                <Route path="*" element={<div>없는페이지입니다</div>} />