导航不起作用,当我手动输入 URL 和链接时,React 路由器工作正常
const navigate = useNavigate();
function handleForm() {
console.log("Form Submitted");
navigate("/");
}
<Form onSubmit={handleForm}>
...
</Form>
在函数中导航到另一个网页而不使用链接
导航不起作用,当我手动输入 URL 和链接时,React 路由器工作正常
const navigate = useNavigate();
function handleForm() {
console.log("Form Submitted");
navigate("/");
}
<Form onSubmit={handleForm}>
...
</Form>
在函数中导航到另一个网页而不使用链接
e.preventDefault();
当你提交表单时你失踪了。你的最终代码看起来像这样 -上面将按预期工作,我还假设您已经检查了任何其他错误/错误,并且您的主应用程序包含在 BrowserRouter 中。如果这仍然不起作用,您也可以使用 useHistory 而不是 useNavigate(),两者的工作原理相同。让我知道它是否对您有用!
您还可以使用箭头函数来遵循较新的 ECMA 脚本语法 ES6。另一个原因是您
lexical this
可能不会使用,因此箭头函数是更好的选择。上面的答案是正确的。您应该始终包括,
e.preventDefault()
但在您的情况下,它也应该在没有这个的情况下进行导航。确保路由定义和命名正确,仔细检查以确保正确。另外,如果问题没有解决,请分享您正在处理导航的 App.jsx。