Как предотвратить перезагрузку страницы при отправке формы?

Поведение по умолчанию:
По умолчанию при отправке формы браузер пытается отправить данные на сервер и перезагружает страницу. В современных SPA-приложениях это поведение нежелательно.

Как отменить:
В обработчике события onSubmit формы нужно вызвать event.preventDefault().

Пример:

const LoginForm = () => {
  const handleSubmit = (event) => {
    event.preventDefault(); // Предотвращаем перезагрузку
    // Дальше ваша логика обработки данных формы
    console.log('Форма отправлена, но страница не перезагрузилась');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <input type="password" name="password" />
      <button type="submit">Login</button>
    </form>
  );
};

Что дальше:
После отмены перезагрузки вы можете:

• Валидировать данные формы.

• Отправлять данные на сервер с помощью AJAX (например, через fetch или axios).

• Обновлять состояние приложения based on the server response.

Важно:
Не забывайте обрабатывать ошибки при отправке данных и показывать пользователю feedback.