React嵌套路由问题：URL变更但页面未渲染

核心问题 #

你的MyPortal组件里没有添加Outlet组件，子路由workouts对应的WorkoutsFetch组件缺少渲染容器，导致URL变更但页面无内容。React Router v6中，嵌套路由必须通过Outlet来挂载子组件，这是和v5写法的关键区别。

修复步骤 #

1. 在MyPortal组件中导入Outlet：

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

2. 在MyPortal的JSX中添加Outlet，放在你希望子路由内容显示的位置：

function MyPortal() {
  return (
    <div className="my-portal-wrapper">
      {/* MyPortal自身的内容，比如侧边栏、头部信息等 */}
      <h3>我的个人中心</h3>
      {/* 子路由组件会渲染在这个Outlet位置 */}
      <Outlet />
    </div>
  );
}

3. 恢复父路由的path为"myportal"，v6中嵌套路由的父路径不需要添加/*通配符，子路由路径会自动和父路径拼接：

<Route path="myportal" element={<MyPortal />}>
  <Route path="workouts" element={<WorkoutsFetch />} />
</Route>

额外检查 #

确认MyPortal内的跳转链接写法正确，使用react-router-dom提供的Link组件：

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

// 相对路径写法（推荐，基于当前父路由路径）
<Link to="workouts">查看我的训练</Link>
// 或绝对路径写法
<Link to="/myportal/workouts">查看我的训练</Link>

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