React Router v5中history.push替换URL最后路径段的问题排查

问题原因 #

你调用history.push('modal/selectroute')时用的是相对路径（路径开头没有斜杠），React Router v5对相对路径的处理规则是：基于当前URL的最后一个路径段进行替换，而非把新路径追加到现有路径末尾。比如当前路径是/home/menu/allergens，使用相对路径会替换掉allergens，最终得到/home/menu/modal/selectroute，这就是你看到的只替换最后一段的现象。

解决办法 #

有两种常用方式解决这个问题：

1. 使用绝对路径 #

给路径加上开头的斜杠，明确指定完整路径，React Router会直接跳转到该绝对路径，不会基于当前路径修改：

history.push('/home/menu/allergens/modal/selectroute')

这种方式适合路径固定的场景，但不够灵活，如果当前路径变化，硬编码的绝对路径可能不符合需求。

2. 基于当前路径动态拼接 #

利用useLocation钩子获取当前路径，再拼接新的路径段，实现动态追加：

import { useHistory, useLocation } from "react-router-dom";

export const Thing = () => {
  const history = useHistory();
  const location = useLocation();
  return (
    <div>
      <button onClick={() => history.push(`${location.pathname}/modal/selectroute`)}>
        navigate
      </button>
    </div>
  );
};

这种方式会在当前路径的基础上直接追加新的路径部分，比如当前路径是/home/menu/allergens，点击后会导航到/home/menu/allergens/modal/selectroute，完全符合预期。

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