TIL: React | React Router v6 nesting navigator

중첩 네비게이트 생성 방법중 하나로
router 의 children 첫 번째 인자에 index, element: navigate 를 주고
두 번째 인자로 navigate 에서 이동할 path 에 대한
element, children 을 줄 수 있다

path 에는 query parmas 를 주어 ':path' 형식으로 줄 수 있음

app.tsx

return (
	<div>
    	<RouterProvider router={router} />
    </div>
)

router.tsx

const childrenRoutes = [
  {
    index: true,
    element: <Navigate to="newboard" />,
  },
  {
    path: ":board",
    element: <NewBoard />,
    children: [
      { index: true, element: <Navigate to="detailboard" /> },
      { path: ":detail", element: <Detailboard /> },
    ],
  },
];

const HomeRoutes = [
  {
    path: "community",
    element: <Community />,
    children: childrenRoutes
  },
]

export const router = createBrowserRouter([
  {
    path: "*",
    element: <NotFound />,
  },
  {
    path: "/",
    element: <Home />,
    children: HomeRoutes,
  },
]);