Как я могу перенаправить после отправки формы реагировать

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

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

Если вы знакомы с Promises и async await, вы можете использовать следующее

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. Это удаляет ненужную бизнес-логику из ваших компонентов, обеспечивает более чистое тестирование и лучшее разделение проблем.

Answer 2

U может использовать это для перенаправления

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