如果我多次按下按钮，则使用导航不弹出返回路线

Question

这是我使用导航栏和路线的应用程序 js 代码

export default function App() {

    return (
        
    <main>
        <Navbar />

        <Routes>
        <Route path="/" element={<Username/>}/>
        <Route path="/register" element={<Register/>}/>
       
      </Routes>
      </main>

    )
  }

这是按钮组件

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

export const Button = () => {
  const navigate = useNavigate({ replace: true });

  return (
    <>
      <button
        onClick={() => navigate("../register")}
        className='justify-center items-center bg-buttoncolor text-white px-6 py-2 rounded-full'
      >
        Sign Up Now
      </button>
    </>
  );
};

导出默认按钮；

当我按下此按钮两次或多次，然后单击后退按钮（浏览器后退按钮）我必须同时单击后退按钮以 go 返回上一条路线，例如，如果我按下按钮 10 次，则我必须按下后退 10 次时间到 go 回到以前的路线

Answer 1

发生此问题是因为将 replace 选项设置为 true 的 useNavigate 挂钩正在替换历史记录中的当前路由，而不是添加新路由。 这使得浏览器的后退按钮 go 只有在删除了所有被替换的路由后才会返回到之前的路由。

要解决此问题，您可以将 replace 选项更改为 false，这将向历史记录添加一条新路由，而不是替换当前路由。 代码如下所示：

const navigate = useNavigate({ replace: false });

Answer 2

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

export const Button = () => {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <>
      <button
      
        onClick={() => {
          (location.pathname === "/register") ? [] = [] :navigate("../register")
          
      
      }}
        className="justify-center items-center bg-buttoncolor text-white px-6 py-2 rounded-full"
      >
        Sign Up Now
      </button>
    </>
  );
};

export default Button;

根据问题（如果我多次按下按钮，那么我必须多次按下后退按钮到 go 回到以前的路线）这个问题的答案是我们可以通过以下方式检查路线

useLocation() (location.pathname === "/register")? [] = []:导航("../注册")

如果路线相同，我们将保持在相同的路线上，即使我们多次按下按钮，当按下后退浏览器按钮时，我们可以 go 回到上一条路线。