使用react-router-dom嵌套路由时子路由Link失效问题求助

你的嵌套路由失效主要有三个核心问题，按以下方式修改即可解决：

问题点与修正方案 #

1. 父路由缺少<Outlet />组件
   react-router-dom的嵌套路由依赖父组件通过<Outlet />承载子路由内容，你的父路由/admin未添加该组件，导致子路由内容无法渲染。

2. 子路由重复渲染AdminLayout
   父路由已经提供了布局容器，子路由只需渲染页面内容组件即可，重复嵌套布局会导致冗余，同时干扰路由渲染逻辑。

3. 路由配置存在语法错误
   父路由中errorElement: <ErrorPage />后缺少逗号，会触发JS语法错误，导致路由配置无法正常加载。

修正后的完整路由配置 #

{
  path: '/admin',
  element: (
    <AdminLayout>
      <Outlet /> {/* 新增Outlet，用于渲染子路由内容 */}
    </AdminLayout>
  ),
  errorElement: <ErrorPage />, // 补上缺失的逗号
  children: [
    {
      index: true, // 新增默认路由，访问/admin时渲染AdminDashboard
      element: <AdminDashboard />
    },
    {
      path: 'form',
      element: <AdminFormDashboard />, // 移除重复的AdminLayout
      errorElement: <ErrorPage />
    },
  ]
},

补充说明 #

• 新增index: true的子路由，替代原来父路由中直接写的AdminDashboard，符合嵌套路由的规范逻辑，访问/admin时会默认渲染仪表盘页面。
• 父路由仅保留布局容器和<Outlet />，所有子路由的内容都会自动注入到Outlet位置。
• 你的侧边栏跳转代码<Link to="/admin/form">本身没有问题，修改路由配置后即可正常跳转并渲染子路由页面。

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