React-Router-Dom v6.9.0路由跳转异常问题求助

问题核心 #

LoginForm是嵌套在根路由/下的子路由（路径login），使用相对路径跳转时，会基于当前路由/login解析路径，导致本该跳转到/create-account的请求被解析为/login/create-account。

解决方案 #

方案1：使用绝对路径跳转 #

直接在navigate中传入绝对路径/create-account，绝对路径会基于根路由解析，不受当前路由层级影响：

import { useNavigate } from "react-router-dom";

export default function LoginForm() {
  const navigate = useNavigate();

  return (
    <div className="loginForm">
      <h1>Login</h1>
      <p>
        Don't have an account? 
        <a onClick={() => navigate("/create-account")}> Create an account </a>.
      </p>
    </div>
  );
}

方案2：使用<Link>组件（推荐） #

React Router提供的<Link>组件专门用于路由跳转，自动处理路径解析，无需手动绑定点击事件：

import { Link } from "react-router-dom";

export default function LoginForm() {
  return (
    <div className="loginForm">
      <h1>Login</h1>
      <p>
        Don't have an account? 
        <Link to="/create-account"> Create an account </Link>.
      </p>
    </div>
  );
}

补充说明 #

在React Router 6中，嵌套路由的相对路径基于当前路由层级解析。如果坚持使用相对路径，需确保路径相对于父路由，但绝对路径和<Link>组件是更可靠、更符合规范的实现方式，能避免路径解析错误。

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