После отправки моей формы React есть ли более простой способ передать объект на страницу, на которую я хочу перенаправить?

Question

Я использую React 16.13.0. У меня есть следующий обработчик для отправки моей формы React в ее конечную точку ...

  const handleFormSubmit = (e) => {
    ...
     fetch(REACT_APP_PROXY + "/coops/", {
      method: "POST",
      body: JSON.stringify(NC),
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw response; 
        }
      })
      .then((data) => {
        const result = data;
        window.location.href = "/" + result.id + "/people";
      }).catch(err => {
        err.text().then( errorMessage => { 
          setErrors({ errors: errorMessage });
        }); 
      });
  };

Мне было интересно, есть ли более «React» способ перенаправления на следующую страницу. Прямо сейчас я делаю

window.location.href = "/" + result.id + "/people";

, что кажется хакерским. Кроме того, я не могу передать объект на следующую страницу, которая у меня есть на странице, выполняющей отправку (объект «данные» - это то, что в идеале я хотел бы передать на следующую страницу). Таким образом, когда загружается страница перенаправления, я вынужден выполнить еще один вызов fetch, чтобы снова получить этот объект.

Answer 1

React, Передача объектов между загрузками страницы / изменениями местоположения:

• вы можете использовать localStorage / sessionStorage, как описано в принятом ответе здесь .
• или вы используете React Context или Redux для сохранения объекта в глобальном состоянии, которое совместно используется в приложении

React, Маршрутизация и передача объектов:

Во-первых, с обновлением window.location нет ничего плохого. Это действительный способ обновить текущую страницу. Оставить все как есть и использовать sessionStorage для передачи вашего объекта, скорее всего, будет самым быстрым способом решения вашей проблемы. При этом есть более оптимизированные решения, которые больше похожи на реакцию: например, попробуйте React Router . Он также позволяет передавать объекты между маршрутами, передавая их в качестве свойств другим страницам.

пример перехватов response-router-dom:

import { useHistory } from "react-router-dom";

const myComponent = () => {
     const history = useHistory();

...
     .then((data) => {
        const result = data;
        // access state via this.props.location.state.result
        history.push({
           pathname: "/" + result.id + "/people",
           state: {result}
        });
      }).catch(err => {
        err.text().then( errorMessage => { 
          setErrors({ errors: errorMessage });
        }); 
      });
}

Дополнительная информация о response-router- dom здесь .