React Router Dom路由跳转异常：如何避免相对路径嵌套跳转

问题描述 #

开发了一个基于path属性实现页面跳转的React按钮组件ButtonShift，使用useNavigate进行路由跳转。首页点击按钮可通过/about正常跳转到About页面；但在About页面点击按钮时，路由会跳转到/about/path而非预期的/path。

相关代码 #

按钮组件代码 #

interface Props {
  path: string;
  text: string;
}
const ButtonShift = ({ path, text }: Props) => {
  let navigate = useNavigate();
  const routeChange = () => {
    navigate(path);
  };
  return (
    <button className="btn btn-primary" onClick={routeChange}>
      {text}
    </button>
  );
};

export default ButtonShift;

路由配置代码 #

<BrowserRouter>
  <Routes>
    <Route index element={<Home />}></Route>
    <Route path="/home" element={<Home />}></Route>
    <Route path="/about" element={<About />}></Route>
    <Route path="/projects" element={<Projects />}></Route>
  </Routes>
</BrowserRouter>

问题原因 #

React Router的useNavigate在处理路径时，若传入的是相对路径（不以/开头），会基于当前页面的路由路径进行拼接。比如当前在/about页面，传入projects就会拼接成/about/projects；只有传入绝对路径（以/开头），才会从根路由开始跳转，不受当前页面路由影响。

解决方法 #

方法1：传入绝对路径参数 #

使用组件时，确保path属性始终以/开头：

// 正确写法
<ButtonShift path="/projects" text="跳转到项目页" />

// 错误写法（会导致相对路径拼接）
<ButtonShift path="projects" text="跳转到项目页" />

方法2：组件内部强制转换为绝对路径 #

如果无法保证传入的path都是绝对路径，可以在组件内部自动处理：

const ButtonShift = ({ path, text }: Props) => {
  let navigate = useNavigate();
  const routeChange = () => {
    // 确保路径以/开头，转为绝对路径
    const absolutePath = path.startsWith('/') ? path : `/${path}`;
    navigate(absolutePath);
  };
  return (
    <button className="btn btn-primary" onClick={routeChange}>
      {text}
    </button>
  );
};

这样无论传入的是相对路径还是绝对路径，都会统一转为绝对路径跳转，避免出现路径拼接错误。

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