Как я могу обрабатывать обычную форму без вызова AJAX в React?

Question

Я пытаюсь подключиться к конечной точке https://api.com/signup.ashx, у которой есть проблемы с CORS. Поэтому меня попросили выполнить вызов API без ax ios, fetch или чего-то подобного.

Итак, я сделал это:

const handleSubmit = async (event) => {
    let error = false
    let message = ""

    Object.keys(value).forEach((element) => {
      let val = value[element]
      if (!val) {
        error = true
        message = "Please complete all required fields."
      }

      if (element == "email" && val && !validateEmail(val)) {
        error = true
        message = "Please enter valid email address"
      }
    })

    if (error) {
      alert(message)
    } else {
      try {
        console.log("succesful response")
      } catch (error) {
        console.log("error", error)
      }
    }

    event.preventDefault()
  }

return (
      <form
        id="signup"
        name="signup"
        method="post"
        autocomplete="off"
        onsubmit={handleSubmit}
        action="https://api.com/signup.ashx"
      >...</form>
)

Нам все равно, перезагружается ли страница. Проблема в том, что он перезагружается и отправляет пользователя по маршруту ошибки:

locahost:8000/?result=error, что заставляет меня думать, что вызов конечной точки не работает.

Что касается ситуации CORS, это не на мне. Меня просто попросили сделать это, как я уже упоминал.

Так вы хоть представляете, в чем проблема с моим кодом?

Answer 1

Навигация в React контролируется роутерами. Вы должны использовать роутер вместо действия формы. Обратитесь к React Router v4 Перенаправление при отправке формы

Также event.preventDefault должен быть первым оператором в функции отправки.