Проблема с перенаправлением при переходе на страницу успеха

У меня есть форма. Но когда я перенаправляю его на страницу успеха, он не проверяет форум и перемещает его на страницу успеха, а ниже мой код. может кто-нибудь, пожалуйста, помогите мне?

Ниже приведена моя подробная страница проверки, а на странице успеха и ниже - моя маршрутизация.

 <Link to="/success">
     <Button variant="primary" type="submit">
         Submit
     </Button>
  </Link>

Может ли кто-нибудь помочь мне?

sruthi 09.04.2022 11:03
codeandbox.io/s/interesting-galileo-7ex68v?file=/src/App.js вот мои кодыи ящик
sruthi 09.04.2022 11:42
stackoverflow.com/questions/71815592/…. может ли кто-нибудь помочь мне здесь?
sruthi 10.04.2022 12:51
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
3
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Обычно вы проверяете либо изменение поля (еще до отправки), либо отправку. Если последнее, вы определяете свою логику в функции onSubmit формы:

export default function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();
    // do your validation here
    // conditionally do what you want
    // for example navigate to other page: 
    // history.push("/success");
  }
  return (
      <Form onSubmit={handleSubmit}>
        ...
        <Button type="submit">Submit</Button>
      </Form>
  );
}

Вам не нужно обертывать кнопку ссылкой. Кнопка с type="submit" автоматически вызывает функцию onSubmit формы.

Редактировать: Я исправил вашу песочницу, и теперь она работает: https://codesandbox.io/s/charming-curran-1hfe6j

Я установил маршрут в форме как «/», чтобы он изначально отображался при загрузке приложения:

<Routes>
      <Route path="/" element={<MyForm />} />
      <Route path="/success" element={<Success />} />
    </Routes>
  • Ваши переменные не были названы одинаково в функциях начальные значения, имя поля и подтверждать (имя <-> имя пользователя), я их поправил

Я использовал Форма.Управление.Обратная связь для отображения отзыва об ошибке в вашей форме и установил свойство является недействительным в Форма.Контроль.

<Form.Control
    ...
    isInvalid={!!formErrors.name}
/>

и

    <Form.Control.Feedback type="invalid">
    {formErrors.name}
</Form.Control.Feedback>

Добавьте свойство noValidate в компонент Форма, чтобы предотвратить проверку HTML по умолчанию.

<Form onSubmit={handleSubmit} noValidate className="p-3">

Проверка выполняется при отправке, не требуется сложного хука useEffect.

 const handleSubmit = (e) => {
    e.preventDefault();
    const errors = validate(formValues);
    setFormErrors(errors);
    console.log(!errors);
    if (Object.keys(errors).length === 0) {
      navigate("success");
    }
  };

Другие вопросы по теме