ReactJS路由跳转问题：点击Link后URL更新但页面未切换如何解决？

问题根因 #

React Router的<Switch>组件遵循从上到下优先匹配的规则，命中第一个符合路径规则的路由后就会终止后续匹配。
你当前配置的第一个路由path={match.url}未添加exact精确匹配修饰，访问${match.url}/new时，路径前缀完全符合match.url的匹配规则，所以直接渲染了ApplicationLegacy组件，不会继续匹配后续的/new路由。

解决方法 #

你可以任选以下任意一种方案修改路由配置：

方案1：调整路由排列顺序 #

把路径规则更精确的路由放在前面，模糊匹配的路由放在最后：

import ApplicationLegacy from './applicationLegacy';
import ApplicationLegacyUpdate from './applicationLegacy-update';

const Routes = ({ match }) => (
  console.log('match ', match),
  (
    <>
      <Switch>
        <ErrorBoundaryRoute exact path={`${match.url}/new`} component={ApplicationLegacyUpdate } />
        <ErrorBoundaryRoute path={match.url} component={ApplicationLegacy } />
      </Switch>
    </>
  )
);

export default Routes;

方案2：给父路由添加exact属性 #

限定父路由只有路径完全匹配时才会被命中：

import ApplicationLegacy from './applicationLegacy';
import ApplicationLegacyUpdate from './applicationLegacy-update';

const Routes = ({ match }) => (
  console.log('match ', match),
  (
    <>
      <Switch>
        <ErrorBoundaryRoute exact path={match.url} component={ApplicationLegacy } />
        <ErrorBoundaryRoute exact path={`${match.url}/new`} component={ApplicationLegacyUpdate } />
      </Switch>
    </>
  )
);

export default Routes;

补充注意事项 #

• 如果你使用的是React Router v6版本，<Switch>已被废弃替换为<Routes>组件，且默认开启精确匹配，不需要加exact属性，同时组件调用API也有差异，需要对应调整写法。
• 可以在路由定义和跳转逻辑处打印match.url的值，确认嵌套路由的前缀拼接是否符合预期，避免出现路径拼写错误。

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