React Router Dom v5嵌套路由失效 求排查解决方案

我帮你分析下问题出在哪：

你的嵌套路由配置不符合React Router v5的规则，主要有两个关键点：

• 子路由的路径没有和父路由关联：Admin组件里的子路由用了/add-new-strategy和/这种绝对路径，但它们的父路由是/admin，所以这些路径根本匹配不到父路由下的嵌套路由。
• 直接访问/add-new-strategy时，App组件的路由表里根本没有这个路径的配置，自然不会显示任何内容。

下面是具体的修复步骤：

1. 修改Admin组件的路由配置 #

我们需要用useRouteMatch钩子来获取父路由的匹配信息，然后基于这个信息拼接子路由的路径，这样既灵活又不容易出错：

import React from 'react'
// 新增导入useRouteMatch
import { Switch, Route, useRouteMatch } from 'react-router-dom'
import { AdminSideBar } from '../../AdminSideBar'
import { AddNewStrategy } from '../AddNewStrategy'

export const Admin = () => {
  // 获取父路由的匹配路径
  const { path } = useRouteMatch();

  return (
    <div className="container-fluid">
      <div className="row">
        <AdminSideBar />
        <div className="col-md-9 ml-sm-auto col-lg-10 px-md-4">
          <Switch>
            {/* 基于父路由路径拼接子路由 */}
            <Route path={`${path}/add-new-strategy`}>
              <AddNewStrategy />
            </Route>
            {/* 匹配父路由的精确路径，显示Dashboard */}
            <Route path={path} exact>
              Dashboard should show up here...
            </Route>
          </Switch>
        </div>
      </div>
    </div>
  )
}

2. 使用正确的访问路径 #

修改后，你需要用以下路径访问对应内容：

• 访问Admin Dashboard：/admin
• 访问AddNewStrategy：/admin/add-new-strategy
• 访问Home：/（这个路径的配置是对的，只要Home组件本身没问题，应该能正常显示）

补充说明 #

在React Router v5里，嵌套路由的父路由一定不能加exact属性（你App组件里的/admin路由已经做到了），这样子路由才能匹配到父路由的路径前缀。用useRouteMatch能自动获取当前组件所在的父路由路径，避免硬编码前缀，后续如果父路由路径修改，子路由也会自动适配。

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