React Route v6 - useRoutes index = true 属性?

Question

在这种情况下，“index=true”的目的是什么？为什么我要使用 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 /> },
         
          ],
        },

Answer 1

index 告诉 react-router 当您位于 route.

的索引处时，它应该呈现提供的 element

在这种情况下，它将在 /dashboard/e-commerce 路线上呈现 <Navigate to="/dashboard/e-commerce/shop" replace />。在这种情况下，这将确保用户在不小心降落在这条路线上时重定向到 /dashboard/e-commerce/shop。

index 路由背后的概念通过示例变得更加清晰：

<Route path="albums" element={<BaseLayout />}>
  <Route index element={<AlbumsList />} />
  <Route path=":id" element={<AlbumDetail />} />
  <Route path="new" element={<NewAlbumForm />} />
</Route>

在 /albums 它将呈现：

<BaseLayout>
  <AlbumsList />
</BaseLayout>

在 /albums/some-unique-album-id 它将呈现：

<BaseLayout>
  <AlbumDetail />
</BaseLayout>

在 /albums/new 它将呈现：

<BaseLayout>
  <NewAlbumForm />
</BaseLayout>

React Route v6 - useRoutes index = true 属性?

React Route v6 - useRoutes index = true property?

reactjs

react-router-dom