Reactjs 提交表单后如何重定向

我对英语也是新手。提交表单后如何重定向

  function Test() {
  const { register, handleSubmit } = useForm()
  const onSubmit = data => {
    fetch(`http://localhost:4000/signup`)
    //Here i want to redirect after signup
  }
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ....
    </form>
  );
}

功能测试（）{
常量{register，handleSubmit}=useForm（）
const onSubmit=data=>{
取回(`http://localhost:4000/signup`)
//这里我想在注册后重定向
}
返回(
....
);
}

fetch可以与回调或承诺一起使用，您需要等待异步请求完成后再重定向

这是一个简单的回调示例，它假设您不需要访问请求的响应体或检查响应状态

function Test() {
  const { register, handleSubmit } = useForm()
  const onSubmit = data => {
    fetch(`http://localhost:4000/signup`)
      .then(resp => {
        // Navigate here, either:
        // use browser (not nice if SPA)
        window.location = "http://www.url.com/path";
        // use connected react router
        // implementation specific
        // e.g. this.props.push("/path");
      });
  }
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ....
    </form>
  );
}

功能测试（）{
常量{register，handleSubmit}=useForm（）
const onSubmit=data=>{
取回(`http://localhost:4000/signup`)
。然后（resp=>{
//在此处导航，或者：
//使用浏览器（如果SPA不好）
window.location=”http://www.url.com/path";
//使用连接的路由器
//具体实施
//例如，此道具推送（“/path”）；
});
}
返回(
....
);
}

如果您熟悉Promissions和AsyncWait，那么可以使用以下方法

function Test() {
  const { register, handleSubmit } = useForm()
  const onSubmit = async (data) => {
    await fetch(`http://localhost:4000/signup`);
    // navigate here
  }
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ....
    </form>
  );
}

功能测试（）{
常量{register，handleSubmit}=useForm（）
const onSubmit=async（数据）=>{
待命(`http://localhost:4000/signup`);
//在这里导航
}
返回(
....
);
}

理想情况下，您应该通过某种中间件来处理这些副作用，例如Redux Thunk、Promise、Sagas或Observable。这将从组件中删除不必要的业务逻辑，允许更干净的测试和更好的关注点分离