React Router v6能否同时使用index与path属性？路由渲染异常求助

你当前的问题出在index路由不能同时设置path属性。index路由的作用就是匹配父路由的精确路径（也就是/settings/），它不需要额外的path参数，同时设置index和path会导致路由规则冲突，所以访问/settings/时无法正确渲染组件。

这里有两种可行的解决方式：

方式一：直接匹配两个路径渲染相同组件 #

添加一个不带path的index路由，专门匹配/settings/，同时保留path="account"的路由，两者都指向AccountDetails组件：

<Routes>
    {/* 匹配/settings/ */}
    <Route index element={<AccountDetails />} />
    {/* 匹配/settings/account */}
    <Route 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/account，可以把index路由设置为跳转，保留原有的account路由：

<Routes>
    {/* 访问/settings/时自动跳转到account */}
    <Route index element={<Navigate to="account" />} />
    <Route 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/时是直接显示内容还是跳转路径。

内容的提问来源于stack exchange，提问作者jBailony