Перенаправление на страницу результатов с реакцией / редукцией нажатием кнопки

Question

У меня есть компонент «Поиск», который делает запрос API для получения списка фильмов. На данный момент компонент «Результаты» отображается под компонентом «Поиск» на той же странице. Я хочу перевести пользователя на другой URL-адрес, который имеет результаты только при отправке формы.

У меня есть элемент кнопки для отправки формы. На вкладке «Сети» в Google Chrome я вижу, что я успешно извлекаю правильные данные, однако я не уверен, как перенаправить пользователей на страницу результатов с помощью элемента кнопки. Возможно ли это с помощью response-router-dom

export class SearchForm extends React.Component {
  onChange = e => {
    this.props.searchMovie(e.target.value);
  };

  onSubmit = e => {
    e.preventDefault();
    this.props.fetchMovies(this.props.text);
  };

  render() {
    return (
      <form id='searchForm' onSubmit={this.onSubmit}>
        <input
          type='text'
          className='form-control'
          name='searchText'
          placeholder='Search by Title...'
          onChange={this.onChange}
        />
        <button
          to={`/movies`}
        >
          Search
        </button>
      </form>
    );
  }
}

Answer 1

Вы можете использовать import { useHistory } from "react-router-dom";

Тогда

this.history = useHistory();

onSubmit = e => {
    e.preventDefault();
    this.props.fetchMovies(this.props.text);
    this.history.push('/movies');

  };

Answer 2

Вы можете использовать <Redirect to="yourLink"/> из пакета reat-router для этого (если вы визуализируете этот компонент, он будет мгновенно перенаправлен)

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md