将 onClick 处理程序添加到链接内的按钮时，反应路由器链接不起作用

Question

我有一个表单，当用户按下提交按钮时，我希望对输入数据进行一些计算，然后将用户带到一个新页面。

应用程序.js

function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <div className="app">
          <Navbar />
          <main className="content">
            <Routes>
              <Route path="/" element={<Calculator />} />
              <Route path="/results" element={<Return />} />
            </Routes>
          </main>
        </div>
      </ThemeProvider>
    </>
  );
}

计算器.js

function Calculator() {
  return (
    <>
        // Form inputs etc.

        <Link to="/results">       
            <button onClick={handleSubmit}>Click</button>
        </Link>
    </>
  );
}

出于我不知道的原因，当 onClick 事件处理程序未附加到按钮时，链接有效，但当我添加 onClick 事件处理程序时，链接不再有效。 将 onClick 事件处理程序添加到按钮后， handleSubmit function 运行但链接不会 go 到/results页面

Answer 1

按钮中的 OnClick 正在阻止事件到 dom 中的父级您可以使用useNavigate而不是 Link 来处理这个（对于旧版本的 react-router-dom 是useHistory ）

import { useNavigate } from 'react-router-dom';
function Calculator() {
  const navigate = useNavigate()
  const handleSubmit = () => {
      //your code
      
      navigate("/results")
  }
  return (
    <>
        // Form inputs etc.

             
         <button onClick={handleSubmit}>Click</button>
        
    </>
  );
}