React Router Dom v6侧边栏子菜单导航配置：解决/manage路径嵌套路由重定向问题

我来帮你搞定这个嵌套路由的问题！你现在遇到的页面重定向和子组件挂载失败，主要是因为路由结构没有正确嵌套、父路由缺少Outlet渲染出口，以及导航链接路径不正确这几个原因。下面是具体的修复步骤和代码示例：

1. 修正路由配置：嵌套子路由到/manage下 #

首先需要把Sub1、Sub2作为Manage路由的子路由，这样它们的路径就会自动继承父路由的/manage前缀，变成/manage/sub1、/manage/sub2。同时要确保PrivateRoute作为布局路由能正确渲染子路由：

import { Routes, Route, Navigate } from 'react-router-dom';

const App = () => (
  <div>
    <Routes>
      {/* 公共路由：未登录时访问 */}
      <Route path="/" element={<PublicRoute />}>
        <Route path="login" element={<Login />} />
      </Route>

      {/* 私有路由：已登录时访问 */}
      <Route path="/" element={<PrivateRoute />}>
        <Route path="dashboard" element={<Dashboard />} />
        {/* 父路由：Manage页面 */}
        <Route path="manage" element={<Manage />}>
          {/* 子路由：自动继承/manage前缀 */}
          <Route path="sub1" element={<Sub1 />} />
          <Route path="sub2" element={<Sub2 />} />
          {/* 可选：访问/manage时默认跳转到第一个子项 */}
          <Route index element={<Navigate to="sub1" replace />} />
        </Route>
      </Route>

      {/* 404路由：匹配所有未定义路径 */}
      <Route path="*" element={<Navigate to="/dashboard" replace />} />
    </Routes>
  </div>
);

2. 在Manage组件中添加Outlet渲染出口 #

React Router需要通过Outlet组件来渲染嵌套的子路由内容，所以你需要在Manage组件中加入这个出口，否则子组件Sub1、Sub2会无处挂载：

import { Outlet } from 'react-router-dom';

const Manage = () => {
  return (
    <div className="manage-layout">
      {/* 这里保留你原有的Manage页面内容，比如侧边栏容器 */}
      <div className="manage-sidebar">
        {/* 你的侧边栏导航可以放在这里 */}
      </div>
      {/* 子路由内容会渲染在这个Outlet里 */}
      <div className="manage-content">
        <Outlet />
      </div>
    </div>
  );
};

export default Manage;

3. 修正侧边栏导航链接的路径 #

原来的/sub1、/sub2路径是和/manage同级的，现在需要改成嵌套路径/manage/sub1、/manage/sub2，确保点击时跳转到正确的嵌套路由：

<NavItem link="/manage" icon={HappinessIcon} label="Manage" hasSubItem>
  <div>
    <NavSubItem link="/manage/sub1" label="Sub Item 1" />
    <NavSubItem link="/manage/sub2" label="Sub Item 2" />
  </div>
</NavItem>

4. 确保PrivateRoute是正确的布局路由 #

如果你的PrivateRoute组件还没有处理子路由渲染，需要添加Outlet来让它的子路由（比如dashboard、manage）能正常显示：

import { Outlet, Navigate } from 'react-router-dom';

const PrivateRoute = () => {
  // 这里替换成你的实际认证逻辑，比如检查本地存储的token
  const isAuthenticated = localStorage.getItem('authToken') !== null;

  if (!isAuthenticated) {
    // 未登录时重定向到登录页
    return <Navigate to="/login" replace />;
  }

  // 已登录时渲染子路由
  return <Outlet />;
};

export default PrivateRoute;

为什么这样能解决问题？ #

• 嵌套路由的核心是父路由提供渲染出口（Outlet），子路由的路径基于父路由的路径自动拼接，避免了手动写全路径的麻烦。
• 修正导航链接的路径后，点击子项会直接跳转到/manage下的子路由，不会触发错误的路由匹配和重定向。
• 可选的index路由可以让用户访问/manage时自动跳转到第一个子项，避免页面空白或不必要的重定向。

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