React Router 6.8.1嵌套路由组件渲染问题求助

问题场景 #

使用react-router-dom 6.8.1 + React 18.0.9，需实现以下流程：

1. 从MemberMgt页面点击列表项进入MemberDetail页面
2. 点击MemberNavbar的按钮，在MemberDetail的指定区域渲染对应子组件（如MemberExample1）
   但当前点击按钮后无法正常渲染目标组件。

问题根源 #

1. 组件引用错误：MemberDetail中导入的组件名称与JSX中使用的名称不匹配
2. 嵌套路由路径写法错误：内部嵌套路由使用了绝对路径（带/），导致路由匹配失败
3. 路由配置层级不规范：子路由完全写在组件内部，未与外层路由配置联动（可选优化点）

修复步骤 #

1. 修正MemberDetail.tsx的组件引用与路由路径 #

修改组件引用和嵌套路由的路径写法，将绝对路径改为相对路径：

import MemberBrief from './MemberDetailMenu/MemberBrief/MemberBrief';
import MemberExample1 from './MemberDetailMenu/MemberMsMed/MemberExample1';
import MemberExample2 from './MemberDetailMenu/MemberPoint/MemberExample2';
import MemberExample3 from './MemberDetailMenu/MemberWarn/MemberExample3';
import MemberNavbar from './MemberDetailMenu/MemberNavbar';

const MemberDetail = () => {
  const { state } = useLocation();

  return (
    <>
      <div className="title-box">
        <h5>Main - Detail Page</h5>
      </div>
      <div className="detail-box-detail">
        <div className="detail-global-container-gray">
          <div className="memberNavbar">
            <MemberNavbar />
          </div>
          {/* 修正：使用相对路径，去掉开头的/ */}
          <Routes>
            <Route path="*" element={<MemberBrief />} />
            <Route path="example1" element={<MemberExample1 />} />
            <Route path="example2" element={<MemberExample2 />} />
            <Route path="example3" element={<MemberExample3 />} />
          </Routes>
        </div>
      </div>
    </>
  );
};

2. 优化路由配置（更规范的写法） #

将子路由移到外层routers.tsx中，使用<Outlet>渲染子组件，这是React Router 6推荐的嵌套路由方式：

修改routers.tsx

import MemberMgt from './pages/MemberMgt';
import MemberDetail from './pages/MemberMgt/MemberDetail';
import MemberBrief from './pages/MemberMgt/MemberDetailMenu/MemberBrief/MemberBrief';
import MemberExample1 from './pages/MemberMgt/MemberDetailMenu/MemberMsMed/MemberExample1';
import MemberExample2 from './pages/MemberMgt/MemberDetailMenu/MemberPoint/MemberExample2';
import MemberExample3 from './pages/MemberMgt/MemberDetailMenu/MemberWarn/MemberExample3';

const Routers = (): JSX.Element => {
  const location = useLocation();

  return (
    <Routes location={location}>
      <Route path="/" element={<Main />} />
      <Route path="/designsystem" element={<DesignSystem />} />
      <Route path="/modal" element={<ModalPage />} />
      <Route path="*" element={<NotFound />} />
      <Route path="/servermgt" element={<ServerMgt />} />

      <Route path="/membermgt">
        <Route path="" element={<MemberMgt />} />
        <Route path="detail/:id">
          <Route path="" element={<MemberDetail />} />
          {/* 将子路由配置到外层 */}
          <Route path="example1" element={<MemberExample1 />} />
          <Route path="example2" element={<MemberExample2 />} />
          <Route path="example3" element={<MemberExample3 />} />
          <Route path="*" element={<MemberBrief />} />
        </Route>
      </Route>
    </Routes>
  );
};

修改MemberDetail.tsx，用<Outlet>替代内部<Routes>

import { Outlet, useLocation } from 'react-router-dom';
import MemberNavbar from './MemberDetailMenu/MemberNavbar';

const MemberDetail = () => {
  const { state } = useLocation();

  return (
    <>
      <div className="title-box">
        <h5>Main - Detail Page</h5>
      </div>
      <div className="detail-box-detail">
        <div className="detail-global-container-gray">
          <div className="memberNavbar">
            <MemberNavbar />
          </div>
          {/* 使用Outlet渲染匹配的子路由组件 */}
          <Outlet />
        </div>
      </div>
    </>
  );
};

3. 简化MemberNavbar的导航逻辑（可选） #

使用相对路径导航，无需拼接完整路径，代码更简洁：

import { useNavigate, useParams } from 'react-router-dom';

const MemberNavbar = () => {
  const navigate = useNavigate();
  const { id } = useParams();

  const handleClickBrief = () => {
    navigate(`.`); // 相对路径返回当前父路由
  };
  const handleClickExample1 = () => {
    navigate(`example1`); // 相对路径跳转到子路由
  };
  const handleClickExample2 = () => {
    navigate(`example2`);
  };
  const handleClickExample3 = () => {
    navigate(`example3`);
  };

  return (
    <div className="detail-button">
      <Button onClick={handleClickBrief} style="transparent" size="md">
        Main - detail page
      </Button>
      <Button onClick={handleClickExample1} style="transparent" size="md">
        Example1
      </Button>
      <Button onClick={handleClickExample2} style="transparent" size="md">
        Example2
      </Button>
      <Button onClick={handleClickExample3} style="transparent" size="md">
        Example3
      </Button>
    </div>
  );
};

验证修复 #

完成上述修改后：

1. 从MemberMgt点击列表项可正常进入MemberDetail
2. 点击MemberNavbar的各个按钮，对应组件会在MemberDetail的指定区域正确渲染

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