react-router-dom

웹 브라우저 전용 버전이며, react-router에 DOM전용 기능이 들어간 확장판이다.
브라우저 기반 SPA를 만들때 사용하면 된다.

➕ 설치

npm install react-router-dom

yarn add react-router-dom

🤓 url로 페이지 이동하기 (함수 기반 라우팅)

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import About from "./About";
import Home from "./Home";
import Stats from "./Dashboard/Stats";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  { 
    path: "/dashboard",
    element: <Dashboard />,
    // ⭐ 중첩 라우팅
    children: [
      { path: "stats", element: <Stats /> },
      { path: "settings", element: <Settings /> },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

//dashboard 페이지
import { Outlet } from "react-router-dom";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome to the Dashboard page!</p>
      <hr />
    //⭐ Outlet의 위치에 자식 컴포넌트를 렌더링한다.
      <Outlet />
    </div>
  );
}

• react router v6.4이전 방식

import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./About";
import Home from "./Home";

export default function App (){
  return <BrowserRouter>
    <Routes>
      {/* path에 / 는 기본페이지를 의미 */}
      <Route path="/" element={<Home />}/>
      {/* /about을 url에 쓰면 About 페이지로 이동한다 */}
      <Route path="about" element={<About />}/>
      </Route>
    </Routes>
  </BrowserRouter>
}

➕ 중첩 라우팅하기

import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./About";
import Home from "./Home";

export default function App (){
  return <BrowserRouter>
    <Routes>
      {/* ⭐ 중첩 라우팅하기 */}
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="stats" element={<Stats />} />
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  </BrowserRouter>
}

//dashboard 페이지
import { Outlet } from "react-router-dom";

export default function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome to the Dashboard page!</p>
      <hr />
    //⭐ Outlet의 위치에 자식 컴포넌트를 렌더링한다.
      <Outlet />
    </div>
  );
}