為什么 React-router 鏈接在 onClick function 上不起作用

Question

 <Link to="/final-preview">
            <button  onClick={handleSubmit}>
              Final Preview
            </button>
 </Link>

因此，在 onClick function 之前，鏈接工作正常，但之后就不行了。 如果有人知道路由器鏈接的一些特殊性，我將不勝感激:)

Answer 1

您可能會嘗試useNavigate作為解決方案，而不是

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

function ThisPage() {
  let navigate = useNavigate();

  const leavePage = () => {
    navigate("/final-preview");
  }
  
  return (
    <div>
      <button onClick = {leavePage}/>
    </div>
  )
}

export default ThisPage;

在離開頁面方法中，您可以在導航到下一個鏈接之前處理提交預覽。

希望這可以幫助。

Answer 2

這是例子

首先導入 React Router

import {
  Link as RouterLink,
  Route,
  Routes,
} from "react-router-dom";

添加代碼

<Link component={RouterLink} to="/final-preview">
      <button  onClick={handleSubmit}>
       Final Preview
       </button>
 </Link>