[英]React Route v6 - useRoutes index = true property?
In this case, what is the puerpose of "index=true"?在这种情况下,“index=true”的目的是什么? why do I use index=true??
为什么我要使用 index=true ? (react-router-dom v6 useRoutes)
(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 /> },
],
},
index
tells react-router
that it should render the provided element
when you are at the index of the route
. index
告诉react-router
当您位于route
的索引处时,它应该呈现提供的element
。
In this case it will render <Navigate to="/dashboard/e-commerce/shop" replace />
at the /dashboard/e-commerce
route.在这种情况下,它将在
/dashboard/e-commerce
路由处呈现<Navigate to="/dashboard/e-commerce/shop" replace />
。 Which will in this case make sure that the user redirects to /dashboard/e-commerce/shop
if they ever accidentally land on this route.在这种情况下,这将确保用户在意外登陆这条路线时重定向到
/dashboard/e-commerce/shop
。
The concept behind an index
route becomes more clear with an example:通过示例,
index
路由背后的概念变得更加清晰:
<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:在
/albums
它将呈现:
<BaseLayout>
<AlbumsList />
</BaseLayout>
At /albums/some-unique-album-id
it will render:在
/albums/some-unique-album-id
它将呈现:
<BaseLayout>
<AlbumDetail />
</BaseLayout>
At /albums/new
it will render:在
/albums/new
它将呈现:
<BaseLayout>
<NewAlbumForm />
</BaseLayout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.