[Router] Link와 Outlet

 

오늘은 Link와 Outlet을 이용하여 간단한 다중 페이지를 만들어보겠습니다.

 

 

 

 

📌 App.js 

 

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import HomePage from "./pages/Home";
import ProductsPage from "./pages/Products";
import RootLayout from "./pages/Root";
 
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "/", element: <HomePage /> },
      { path: "/products", element: <ProductsPage /> },
    ],
  },
]);
 
function App() {
  return <RouterProvider router={router} />;
}
 
export default App;
 

 

RootLayout이라는 요소에 MainNavigation이라는 요소와 children으로 지정된 나머지 요소들을  렌더링 하는 과정입니다. 

 

 

📌 Root.js

 

import { Outlet } from "react-router-dom";
// Outlet : 자녀 라우트 요소들이 렌더링되어야 할 장소를 표시하는 역할을 한다.
 
import MainNavigation from "../components/MainNavigation";
import classes from './Root.module.css'
 
function RootLayout() {
  return (
    <>
      <MainNavigation />
      <main className={classes.content}>
      <Outlet />
      </main>
    </>
  );
}
 
export default RootLayout;
 

 

Outlet: 자녀 라우트 요소들이 렌더링되어야 할 장소를 표시하는 역할을 합니다.

 

 

 

📌 MainNavigation.js

 

import { Link } from "react-router-dom";
 
import classes from "./MainNavigation.module.css";
 
function MainNavigation() {
  return (
    <header className={classes.header}>
      <nav>
        <ul className={classes.list}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/products">Products</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}
 
export default MainNavigation;
 

 

MainNavigation에서는 Link를 통해 원하는 페이지로 이동합니다. 

 

a 태그와 다르게 Link는 to에 주소를 지정합니다. 

 

 

 

📌 Home.js

 

const HomePage = () => {
  return (
    <>
      <h1>My Home Page</h1>
    </>
  );
};
 
export default HomePage;
 

 

 

 

📌 Products.js

 

function ProductsPage() {
    return <h1>The Products Page</h1>;
}
 
export default ProductsPage;