功能完成后如何将用户重定向到不同的路由？

Question

目前，我们在 /signup React 组件中。我有这个功能，如下所示

    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)
    }
}

这个函数在一个反应组件中，现在我需要确保在这个 sendForm 函数完成后，用户应该被重定向到 /login 路由。请帮助我如何做到这一点？？

Answer 1

您可以使用 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

功能完成后如何将用户重定向到不同的路由？

How to redirect user to a different route after a function is completed?

javascript

reactjs

async-await

react-router

web-development-server