我们可以在 React Router v6 中同时使用索引和路径属性吗？

Question

我必须遵循设置页面的路线（在

<Route path="settings/*">

内）：

<Routes>
    <Route index path="account" element={<AccountDetails />} />
    <Route path="password" element={<ChangePassword />} />
    <Route path="notifications" element={<Notifications />} />
    <Route
        path="platform-settings"
        element={!canManageAllEnvironments ? <Navigate to=".. " /> : <Outlet />}
    >
        <Route index element={<PlatformGeneralSettings />} />
        <Route path="roles-and-permissions" element={<RolesAndPermissions />} />
        <Route path="banners" element={<Banners />} />
        <Route path="notifications" element={<EmailNotifications />} />
        <Route path="certificates" element={<Certificates />} />
    </Route>
    <Route path="*" element={<Navigate to="." />} />
</Routes>

帐户子页面是索引页面，因此如果用户转到

/settings/

路线或

/settings/account

路线，他们应该看到帐户详细信息子页面。目前，如果路由是

settings/

，尽管我在帐户路由中添加了索引属性，但没有任何内容被渲染。我该如何处理这种情况？

预计会在

/settings/

和

/settings/account/

路线上看到帐户子页面！

Answer 1

虽然

Route

组件同时使用

index

和

path

属性，但它不能同时使用两者。

path

属性将覆盖

index

属性，因此这就是为什么

<Route index path="account" element={<AccountDetails />} />

和 URL 路径

"/settings"

没有路由匹配且

AccountDetails

未渲染，即空白页面。

您需要将它们分成单独的路线，您可以选择：

• 在索引和常规路线上渲染

  AccountDetails

  ：

  <Routes>
    <Route index element={<AccountDetails />} />
    <Route path="account" element={<AccountDetails />} />
  
    ....
  </Routes>
  

• 在

  AccountDetails

  上渲染

  "*/account"

  并渲染从索引路由到帐户页面的重定向：

  <Routes>
    <Route index element={<Navigate to="account" replace />} />
    <Route path="account" element={<AccountDetails />} />
  
    ....
  </Routes>
  

• 渲染

  AccountDetails

  作为索引路由，并渲染从帐户页面到索引路由的重定向：

  <Routes>
    <Route index element={<AccountDetails />} />
    <Route path="account" element={<Navigate to="." replace />} />
  
    ....
  </Routes>