通过单击按钮重定向到带有反应/还原的结果页面

Question

我有一个"搜索"组件，它发出API请求来获取电影列表。目前，"结果"组件呈现在同一页面上的搜索组件下方。我想将用户导航到另一个 URL，该 URL 仅在用户提交表单时具有结果。

我有一个按钮元素可以提交表单。从谷歌浏览器的"网络"选项卡中，我可以看到我已成功获取正确的数据，但是，我不确定如何使用按钮元素将用户重定向到结果页面。"反应路由器-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

您可以使用 reat-router 包中的<Redirect to="yourLink"/>来执行此操作(如果您渲染此组件，它将立即重定向(

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

Answer 2

您可以使用import { useHistory } from "react-router-dom";

然后

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