React Router导航异常：多次点击按钮后需多次触发浏览器返回键

问题原因 #

1. useNavigate使用错误：useNavigate函数本身不接受配置参数，replace选项要在调用navigate方法时作为第二个参数传入，你当前的写法不会生效。
2. 默认新增历史记录：每次点击按钮调用navigate时，默认会向浏览器历史栈添加一条新记录，多次点击后栈里会累积多条相同路由记录，导致返回需要多次点击。
3. 相对路径存在风险：使用../register这类相对路径，当路由层级变化时可能出现跳转错误，建议改用绝对路径。

修正后的Button组件代码 #

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

export const Button = () => {
  const navigate = useNavigate();
  return (
    <>
      <button
        onClick={() => navigate("/register", { replace: true })}
        className='justify-center items-center bg-buttoncolor text-white px-6 py-2 rounded-full'
      >
        Sign Up Now
      </button>
    </>
  );
};
export default Button;

关键说明 #

• 绝对路径跳转：用/register绝对路径，确保跳转目标明确，不受当前路由层级影响。
• replace模式：navigate的第二个参数{ replace: true }会让路由跳转时替换当前历史记录，而非新增。这样无论点击多少次按钮，浏览器历史栈里只会保留一条/register的记录，点击一次返回键就能回到之前的路由页面。

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