React Router DOM路由跳转后Account组件未显示问题求助

问题原因 #

React Router DOM的嵌套路由机制要求父路由对应的组件必须包含<Outlet />组件，用来承载子路由的内容。你的Dashboard组件里没有添加<Outlet />，所以当跳转到/admin/dashboard/table时，只有Dashboard会被渲染，其子路由的Account组件没有挂载的位置，自然无法显示。

解决方法 #

步骤1：在Dashboard组件中添加Outlet #

从react-router-dom导入Outlet，并在Dashboard组件的JSX中合适位置插入该组件，让子路由内容能渲染到这里：

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

function Dashboard() {
  return (
    <div className="dashboard-wrapper">
      {/* Dashboard自身的页面内容 */}
      <h2>Dashboard</h2>
      {/* 子路由组件（比如Account）会渲染在这个位置 */}
      <Outlet />
    </div>
  );
}

export default Dashboard;

步骤2：确认Link路径的正确性（可选） #

你的Link使用相对路径to="table"，如果这个Link是在Dashboard组件内部（当前路由为/admin/dashboard时点击），这个相对路径是正确的，能正常跳转到目标路径。如果Link是在其他路由页面，建议改为绝对路径to="/admin/dashboard/table"，不过你已经能成功跳转，这一步可忽略。

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