Как перенаправить после запроса POST в реакции-маршрутизатор v5 с крючками

Question

==== PS Я нашел решение и написал в комментариях.

Я хочу создать форму и показать ответ своего сервера в другом домене после перенаправления. Запрос отправляется из /, и сервер обрабатывает запрос, затем браузер видит ответ от сервера в / result domain.

Условно, это очень просто. Это записывается как

==== index.html ====

<form action="/result" method="POST">
  <input type="text" placeholder="Your Name" />
  <input type="submit" />
</form>

Есть и другие примеры, такие как: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_post

Я хочу написать код React, как описано выше, однако у меня возникают трудности с историей браузера и перенаправлением с помощью параметров. Моя реакция выглядит ниже. Он не передает отправленный браузером ответ на домен / result.

==== App.js ====

function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/result">
            <Result />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function Home() {
  const [submitted, setSubmitted] = useState(false);
  const [content, setContent] = useState("");
  const history = useHistory();

  const handleSubmit = (event) => {
    event.preventDefault()
    fetch('https://api.example.com')
    .then(response => response.json())
    setSubmitted(true);
    history.push("/"); // because Redirect override history, this line enables browser back button (I guess there should be a smarter way)
  }
  if (submitted) {
    return <Redirect to='/result' /> // I want to pass fetched API response to /result
  }
  return (
  <div>
    <h1>Send content to server</h1>
    <form onSubmit={handleSubmit}>
        <label>
          Content:
          <input name="content" type="text" {...bindContent} />
        </label>
        <input type="submit" value="Submit" />
        </form>
  </div>
  );
}

function Result(response) {
  return <h2>Browser received {response}</h2>
}

Answer 1

Из вышеприведенного комментария кажется, что вы нашли решение проблемы, но всем, у кого возникла та же проблема, вы хотите отправить данные при отправке через useHistory hook как const history = useHistory();, а затем history.push("/result", { params: data }); ( второй аргумент - это состояние, которое будет содержать объект params), и в компоненте, к которому вы хотите получить доступ к params, вы будете использовать хук useLocation в качестве const location = useLocation();, а затем location.state.params в домашнем компоненте вы бы сделали

Home. js

const handleSubmit = event => {
 event.preventDefault();
 fetch("https://jsonplaceholder.typicode.com/users")
 .then(response => {
  return response.json();
   })
 .then(data => {
   history.push("/result", { params: data });
   });
 };
// Rest of the Code

и в компоненте, который вы хотите использовать в

Result. js

 import React from "react";
 import { useLocation } from "react-router-dom";
 export default function Result() {
   const location = useLocation();
   const data = location.state.params;
   console.log(data);
   return <h2>Browser received </h2>;
}

Рабочий пример для Codesandbox здесь