리액트 중첩 라우팅(Nested Routing)

1. 📌createBrowserRouter

createBrowserRouter()에 라우팅 할 path와 element로 작성할 수 있다. children 속성으로 배열에 중첩된 라우터(Nested Router)를 추가해 줄 수 있다

 

"/"라는 path를 가지면 Root컴포넌트가 실행되고 Root의 자식 컴포넌트는 Home,Product가 있다.

 

errorElement (v5에는 없고, v6에는 있음)

• 우리의 컴포넌트에 에러가 발생해서 충돌나거나, 컴포넌트의 위치를 찾지 못할 때 사용.
• Root element path에도 에러를 추가할 수 있다
• 다른 컴포넌트들을 또 다른 컴포넌트에서 발생하는 문제로부터 보호해준다
• 하나의 컴포넌트에서 에러가 나도, 다른 페이지를 보는데 문제가 없게 된다

      

      

      

    
    

      <bash />
    
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <Error />,
    children: [
      { path: "/", element: <Home /> },
      { path: "/product", element: <Product /> },
    ],
  },
]);
function App() {
  return <RouterProvider router={router} />;
}

 

1.1. 📌Outlet(특정 컴포넌트만 렌더링하면서 바뀌는 경우 사용)

Root에서 Outlet을 통해 자식 컴포넌트를 레이아웃화 하고 있다.

=> {children} 을 사용하는 것과 같은 효과

      

      

      

    
    

      <bash />
    
function Root() {
  return (
    <>
      <MainNav />
      <main>
        <Outlet />
      </main>
    </>
  );
}

 

 

나만 몰랐던 Link의 기능
<Link to=".."> 최상위 경로로 이동하는 것을 의미
<Link to="../"> 현재 경로에서 한 단계 위로 이동하는 것을 의미

예를 들어, 현재 경로가 /blog/react-router/example이라면
<Link to="..">를 클릭하면 경로가  /blog로 변경되며,
<Link to="../">를 클릭하면 경로가blog/react-router로 변경된다