React Router实现Web应用分模块嵌套路由配置问题

问题根源 #

1. 顶层路由（App.js）仅配置了 / 和 /assignment 两个路径，未注册 /dashboard、/review 这类嵌套路由，直接访问时自然找不到匹配规则。
2. Home 组件内使用绝对路径定义嵌套路由，但这些路径未在顶层路由中关联，同时父组件 SignIn 没有提供嵌套路由的渲染出口，导致子路由无法挂载。

具体修复步骤 #

1. 重构 App.js 的路由结构

将管理员端路由组织为嵌套层级，明确路由之间的父子关系：

import { Router, Routes, Route, Outlet, Navigate } from 'react-router-dom';
import SignIn from './components/signin/SignIn';
import Home from './components/signin/home/Home';
import Dashboard from './components/signin/home/dashboard/Dashboard';
import Review from './components/signin/home/Review';
import AssigneePage from './components/assignee/AssigneePage';

function App() {
  return (
    <Router>
      <div className="maindiv">
        <Routes>
          {/* 管理员端嵌套路由 */}
          <Route path="/" element={<SignIn />}>
            <Route path="home" element={<Home />}>
              {/* 默认进入Home后自动跳转到Dashboard */}
              <Route index element={<Navigate to="dashboard" />} />
              <Route path="dashboard" element={<Dashboard />} />
              <Route path="review" element={<Review />} />
            </Route>
            {/* 根路径默认跳转至Home页面（可结合登录状态调整） */}
            <Route index element={<Navigate to="home" />} />
          </Route>
          {/* 用户端独立路由 */}
          <Route path="/assignment" element={<AssigneePage />} />
          {/* 404兜底路由（可选） */}
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

2. 修改 SignIn 组件，添加路由出口

SignIn 作为管理员端的父路由容器，需要通过 Outlet 渲染子路由内容，同时可加入登录状态判断：

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

function SignIn() {
  // 替换为实际登录状态逻辑
  const isLoggedIn = true;

  if (!isLoggedIn) {
    // 未登录时展示登录表单
    return (
      <div className="signin-form">
        {/* 登录表单代码 */}
      </div>
    );
  }

  // 已登录时渲染子路由（Home及内部页面）
  return <Outlet />;
}

export default SignIn;

3. 调整 Home 组件，用 Outlet 替代内部路由

Home 作为子路由的容器，无需自行定义 Routes，直接用 Outlet 承接子页面内容：

import { Outlet } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import Nav from './Nav';

function Home() {
  return (
    <div>
      <Container className="content">
        <div className="side-nav">
          <Nav />
        </div>
        <div className="main-content">
          {/* 渲染Dashboard/Review等子页面 */}
          <Outlet />
        </div>
      </Container>
    </div>
  );
}

export default Home;

4. 修正导航链接路径

确保侧边栏导航使用相对路径：

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

function Nav() {
  return (
    <nav>
      <Link to="dashboard">仪表盘</Link>
      <Link to="review">审核页</Link>
    </nav>
  );
}

export default Nav;

最终效果 #

• 访问 /：未登录显示登录表单，登录后自动跳转至 /home/dashboard
• 访问 /home/dashboard：显示 Home 侧边栏 + Dashboard 内容
• 访问 /home/review：显示 Home 侧边栏 + Review 内容
• 访问 /assignment：直接进入用户端页面

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