如何在React Router中实现嵌套动态路由并同时渲染多组件？

你当前的问题核心是嵌套路由的配置和渲染逻辑有误，下面是具体的修正方案：

1. 修正路由配置（AllRoutes.tsx） #

嵌套路由的子路由路径需要使用相对路径，而非绝对路径，因为它会继承父路由的路径前缀。修改后的代码如下：

import Home from "../pages/Home";
import CharacterInfo from "../pages/CharacterInfo";
import { Route, Routes, Navigate } from "react-router-dom";
import Episodes from "../pages/Episodes";

const AllRoutes = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/1" />} />
      <Route path="/info">
        <Route path=":id" element={<CharacterInfo />}>
          {/* 子路由使用相对路径，自动拼接父路由的/info/:id前缀 */}
          <Route path="episodes" element={<Episodes />} />
        </Route>
      </Route>
      <Route path="/:p" element={<Home />} />
      <Route path="*" element={<Home />} />
    </Routes>
  );
};

export default AllRoutes;

2. 在父组件中添加子路由占位符（CharacterInfo.tsx） #

React Router需要父组件通过<Outlet />指定子组件的渲染位置，这样访问子路由时，会同时保留父组件内容并渲染子组件。修改后的代码如下：

import { useContext, useEffect } from "react";
import { useParams, Link, useNavigate, Outlet } from "react-router-dom"; // 引入Outlet
import { GetACharacterContext } from "../contexts/GetACharacterContext";

const CharacterInfo = () => {
  const { characterDetail, setId } = useContext(GetACharacterContext);
  const { id } = useParams();
  const navigate = useNavigate();

  useEffect(() => {
    setId(Number(id));
  }, [id]);

  return (
    <>
      <button onClick={() => navigate("/1")}>Home</button>
      <p>{characterDetail.id}</p>
      <p>{characterDetail.name}</p>
      <p>{characterDetail.age ? characterDetail.age : "No data"}</p>
      <p>{characterDetail.occupation}</p>
      {/* 使用相对路径跳转，自动基于当前路由拼接 */}
      <Link to="episodes">Episodes</Link>
      
      {/* 子路由内容会渲染在这个Outlet位置 */}
      <Outlet />
    </>
  );
};

export default CharacterInfo;

3. 验证效果 #

完成修改后：

• 访问localhost/info/1会正常显示卡片详情
• 点击Episodes链接后，URL变为localhost/info/1/episodes，页面会同时保留卡片详情，并在<Outlet />位置渲染Episodes组件

关键知识点说明 #

• 相对路由路径：嵌套子路由无需重复父路由路径，React Router会自动拼接完整路径
• Outlet组件：作为嵌套路由内容的占位容器，是实现父、子组件同时渲染的核心
• 相对路径的Link：在嵌套路由组件中使用相对路径跳转，比写全路径更灵活，适配路由结构变化

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