In this case, what is the puerpose of "index=true" ? why do I use index=true ?? (react-router-dom v6 useRoutes)
{
path: 'dashboard',
element: (
<AuthGuard>
<DashboardLayout />
</AuthGuard>
),
children: [
{
path: 'e-commerce',
children: [
{ element: <Navigate to="/dashboard/e-commerce/shop" replace />, index: true },
{ path: 'shop', element: <EcommerceShop /> },
{ path: 'product/', element: <EcommerceProductDetails /> },
{ path: 'list', element: <EcommerceProductList /> },
],
},
CodePudding user response:
index
tells react-router
that it should render the provided element
when you are at the index of the route
.
In this case it will render <Navigate to="/dashboard/e-commerce/shop" replace />
at the /dashboard/e-commerce
route. Which will in this case make sure that the user redirects to /dashboard/e-commerce/shop
if they ever accidentally land on this route.
The concept behind an index
route becomes more clear with an example:
<Route path="albums" element={<BaseLayout />}>
<Route index element={<AlbumsList />} />
<Route path=":id" element={<AlbumDetail />} />
<Route path="new" element={<NewAlbumForm />} />
</Route>
At /albums
it will render:
<BaseLayout>
<AlbumsList />
</BaseLayout>
At /albums/some-unique-album-id
it will render:
<BaseLayout>
<AlbumDetail />
</BaseLayout>
At /albums/new
it will render:
<BaseLayout>
<NewAlbumForm />
</BaseLayout>