为什么React-router link不能在onClick函数上工作?

Question

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

所以在onClick函数之前，链接是完美的，但之后它不是。如果有人知道一些关于路由器链接的具体信息，我将非常感激:)

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;

在leave page方法中，您可以在导航到下一个链接之前处理提交预览。

希望对你有帮助。

Answer 2

示例

First Import 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>