为何我的React嵌套路由（Nested Route）无法正常工作？

你的核心问题是嵌套路由的父组件<Nav>里没加<Outlet />——React Router v6规定，嵌套路由的父组件必须通过<Outlet />标记子路由内容的渲染位置，否则Home、Group这些子组件根本不会显示在页面上。

第一步：修改Nav组件 #

在Nav组件里导入Outlet，并把它放在导航栏下方（你希望子组件显示的位置）：

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

function Nav() {
  return (
    <div>
      {/* 这里是你的导航栏内容 */}
      <nav>
        {/* 推荐用Link代替a标签，避免页面刷新 */}
        <Link to="/app/Home">首页</Link>
        <Link to="/app/Group">群组</Link>
        <Link to="/app/Learn">学习</Link>
        <Link to="/app/Message">消息</Link>
        <Link to="/app/Profile">个人中心</Link>
      </nav>
      {/* 子路由的内容（Home、Group等）会渲染在这里 */}
      <Outlet />
    </div>
  );
}

export default Nav;

第二步：优化路由配置（可选） #

可以把根路径和Login路径合并，减少重复代码：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Login />} />
    <Route path="Login" element={<Login />} />
    <Route path="Register" element={<Registration />} />
    <Route path="RegisterDetails" element={<PersonalDetails />} />
    <Route path="EduDetails" element={<PersonalDetails2 />} />
    <Route path="Skills" element={<Skills />} />
    <Route path="app" element={<Nav />}>
      <Route path="Home" element={<HomePage />} />
      <Route path="Group" element={<Group />} />
      <Route path="Learn" element={<Learn />} />
      <Route path="Message" element={<Message />} />
      <Route path="Profile" element={<Profile />} />
      <Route path="*" element={<Error />} />
    </Route>
    <Route path="*" element={<Error />} />
  </Routes>
</BrowserRouter>

额外注意点 #

• 确认所有子组件（Home、Group等）都正确导入，文件路径没写错
• 导航链接尽量用React Router的<Link>组件，不要用原生<a>，不然每次点击都会刷新整个页面

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