3. Router

React Router ๋ฒ„์ „ 6.4๋ถ€ํ„ฐ ์ง€์›ํ•˜๋Š”, ๋ผ์šฐํ„ฐ ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์ž.

๋ผ์šฐํŒ… ์ •๋ณด๋งŒ ๋ณ„๋„์˜ ํŒŒ์ผ๋กœ ๊ด€๋ฆฌ, Outlet์—์„œ ๋ถ„๊ธฐ๋œ๋‹ค.

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

function Layout() {
  return (
    <div>
      <Header />
      <Outlet />
      <Footer />
    </div>
  );
}

const routes = [
  {
    element: <Layout />,
    children: [
      { path: "/", element: <HomePage /> },
      { path: "/about", element: <AboutPage /> },
    ],
  },
];

export default routes;

App ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฑฐ์น˜์ง€ ์•Š๊ณ  ๋ฐ”๋กœ ๋ธŒ๋ผ์šฐ์ € ๋ผ์šฐํ„ฐ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค

ํ…Œ์ŠคํŠธํ• ๋•Œ ์‚ฌ์šฉํ•˜๋Š” createMemoryRouter

Last updated