React Router点击BaseNav链接无法渲染对应组件求助

问题核心在于父路由组件未添加子路由的渲染出口：你已经在路由配置中把OeeChart、PortCountChart等设为/dashboard的子路由，但Dashboard组件里没有提供承载这些子组件的位置，导致路由切换后子组件无法渲染。

修复步骤： #

1. 在Dashboard.tsx中导入React Router的Outlet组件
2. 在Dashboard的JSX结构中，添加Outlet作为子路由组件的渲染容器

修改后的Dashboard.tsx代码： #

import Header from "./Header";
import LeftNav from "./LeftNav";
import RightNav from "./RightNav";
import { Outlet } from "react-router-dom"; // 新增Outlet导入

export default function Dashboard() {
  return (
    <div>
      {/* Left Div */}
      <div style={{ float: "left", width: "25%" }}>
        <LeftNav />
      </div>
      {/* Middle Div - 主内容区，包含Header和子路由内容 */}
      <div style={{ float: "left", width: "50%" }}>
        <Header />
        {/* 子路由组件会渲染在这个Outlet位置 */}
        <Outlet />
      </div>
      {/* Right Div */}
      <div style={{ float: "left", width: "25%" }}>
        <RightNav />
      </div>
    </div>
  );
}

额外优化建议： #

你当前路由配置中的index路由使用了<Dashboard />作为元素，这会导致访问/dashboard时嵌套渲染Dashboard组件，建议替换为一个默认的首页内容：

<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<div>欢迎访问仪表盘首页</div>} /> {/* 替换原有的<Dashboard /> */}
  <Route path="oee" element={<OeeChart />} />
  <Route path="port-count" element={<PortCountChart />} />
  <Route path="production-count" element={<ProductionCountChart />} />
  <Route path="idle-time" element={<IdleTimeChart />} />
</Route>

原理说明： #

Outlet是React Router v6中专门用于渲染子路由内容的组件，当用户访问/dashboard/oee这类子路由路径时，父路由组件Dashboard会先渲染，然后Outlet的位置会被替换为对应的子路由组件（比如OeeChart）。没有这个出口，子组件就没有挂载的DOM节点，自然无法显示。

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