react-router v5中history.push()更新URL但不跳转，嵌套路由是否为诱因？

云原生阿岚

2026-10-1

问题原因及解决方案

Router实例重复声明：React Router v5 全局仅需在应用顶层声明一次Router组件即可，你在Mn组件内重复声明挂载了同个history实例的Router，会直接打乱路由匹配逻辑，这是导致问题的核心原因，直接删除Mn组件内的<Router history={history}>标签和对应的闭合标签即可。
跳转路径与路由定义不匹配：你调用history.push('mn/testing')使用的相对路径，和你上层路由定义的MN组件挂载路径/first/完全不匹配，自然无法命中嵌套路由。要访问MN下的子路由，正确的跳转路径应该为/first/testing。如果需要使用通用的相对路径拼接，可以通过useRouteMatch钩子获取父路由匹配前缀：

import { useRouteMatch } from 'react-router-dom';
import history from "../history";

const Mn = () => {
  const match = useRouteMatch();
  // 跳转时拼接父路由前缀
  const jumpToDash = () => history.push(`${match.url}/testing`)
  // 组件渲染逻辑...
}

嵌套路由路径写法错误：React Router v5 的嵌套路由不需要加*/通配符，直接写相对路径即可，修正后的Mn组件路由定义如下：

const Mn = () => {
  const match = useRouteMatch();
  return (
    <div>
      <Route exact path={`${match.path}/testing`} component={DashBoard} />
    </div>
  );
};