[React] 라우팅

createBrowserRouter

const router = createBrowserRouter([
  { path: "/", element: <HomePage /> },
  { path: "/products", element: <ProductsPage /> },
]);

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

outlet

자녀 라우트 요소들이 렌더링 되어야할 장소를 표시하는 역할

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

import MainNavigation from '../components/MainNavigation';
import classes from './Root.module.css';

function RootLayout() {
  return (
    <>
      <MainNavigation />
      <main className={classes.content}>
        <Outlet />
      </main>
    </>
  );
}

export default RootLayout;

//App.js
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { path: "/", element: <HomePage /> },
      { path: "/products", element: <ProductsPage /> },
    ],
  },
]);

errorElement

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { path: "/", element: <HomePage /> },
      { path: "/products", element: <ProductsPage /> },
    ],
  },
]);

errorElement: ,추가해서 따로 처리필요없이 error페이지 삽입

NavLink

className프로퍼티를 추가하면 현재 활성화된 링크 표시

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

import classes from "./MainNavigation.module.css";

function MainNavigation() {
  return (
    <header className={classes.header}>
      <nav>
        <ul className={classes.list}>
          <li>
            <NavLink
              to="/"
              className={({ isActive }) =>
                isActive ? classes.active : undefined
              }
              // style={({ isActive }) => ({
              //   textAlign: isActive ? 'center' : 'left',
              // })}
              end
            >
              Home
            </NavLink>
          </li>
          <li>
            <NavLink
              to="/products"
              className={({ isActive }) =>
                isActive ? classes.active : undefined
              }
            >
              Products
            </NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default MainNavigation;

to="/"으로 돼있기때문에 end사용
end: 현재 활성인 라우트의 URL 뒤가 이 경로로 끝나면 이 링크를 활성으로만 간주해야함

useNavigate

프로그램적으로 이동해야할경우 ex)타이머가 만료된상황

detail페이지 라우팅

   { path: "/products/:productid", element: <ProductDetailPage /> },

useParams

params객체를 주고 라우트 정의에서 프로퍼티로 정의한 모든 동적 경로 세그먼트가 담긴 js 객체

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

function ProductDetailPage() {
  const params = useParams();
  params.productId;
  return (
    <>
      <h1>Product Details!</h1>
      <p>{params.productId}</p>
    </>
  );
}

export default ProductDetailPage;

---