Question

我也是React的新手，也许也是英语的新手。提交表单后如何重定向？

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

Answer 1

U可以使用它来重定向

import { Redirect } from 'react-router-dom'
<Redirect to='/target' />

Answer 2

fetch可以与回调或promise一起使用，在重定向之前，您需要等待异步请求完成。

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

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

如果您熟悉Promises并等待异步，则可以使用以下内容

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

理想情况下，您应该考虑通过某种中间件来处理此类副作用，例如Redux Thunk，Promise，Sagas或Observables。这样可以从组件中删除不必要的业务逻辑，从而可以进行更清洁的测试并更好地分离问题。

提交表单React后如何重定向

2 个答案: