如何解决功能完成后如何将用户重定向到不同的路线?
目前,我们在反应组件中的 /signup
路线。
我有这个功能如下图
const sendForm = async(event) => {
try{
var data = {
Name : name,Password : password,Email : email,};
await axios.post("api/users/",data);
}
catch(err){
console.log("there was an error sending new user through post");
console.log(err)
}
}
这个函数在一个 react 组件中,现在我需要确保在这个 sendForm
函数完成后用户应该被重定向到 /login
路由。请帮我怎么做??
解决方法
您可以使用 React Router 中的 useHistory()
执行此操作。
在要进行路由的位置创建路由 <Switch>
。
<Switch>
<Route path="/login" component={Login} />
</Switch>
不要忘记使用<BrowserRouter />
,您可以在index.js
ReactDOM.render(
<StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,rootElement
);
提取完成后,您可以将 /login
推送到历史记录中,这将重定向您。
const history = useHistory();
const sendForm = async(event) => {
try{
var data = {
Name : name,Password : password,Email : email,};
await axios.post("api/users/",data);
history.push("/login"); // push route in history
}
catch(err){
console.log("there was an error sending new user through post");
console.log(err)
}
}
不要忘记正确导入所有内容。
你可以阅读更多关于 React Router 和 hooks here
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。