Question

目前，我创建了一个搜索栏，我的搜索栏与搜索结果相关联，如下所示：

render() {
if (this.props.itemsFetchSuccess) {
  return (
    <Redirect to={{
      pathname: '/search',
      search: `?item-name=${this.props.searchQuery}`
    }} />
  );

作为搜索栏的渲染组件的一部分。

GOOGLE CHROME MAIN - ＆gt;主要着陆 - ＆gt;搜索结果。

但我怀疑是因为我在React-Router v4中使用了重定向标记，所以它不会将其添加到浏览器历史记录堆栈中。如果我从搜索结果页面按回浏览器，它将不会返回到之前的页面（即主要着陆），但它将返回到主着陆之前的页面。

有没有更好的方法，因为我尝试使用Link标签，但这不起作用，因为它只是生成链接，并且在搜索结果完成后实际上不会重定向。

谢谢！

Answer 1

Redirect会覆盖history stack中的当前条目，因此您无法导航到历史记录堆栈中的当前位置。

请参阅 documentation

您可以使用history.push()函数中的componentWillReceiveProps以编程方式进行导航。

componentWillReceiveProps(nextProps) {
    if(nextProps.itemsFetchSuccess !== this.props.itemsFetchSucess && nextProps.itemsFetchSuccess) {
         this.props.history.push({
              pathname: '/search',
              search: `?item-name=${nextProps.searchQuery}`
         })
    }
}

P.S。确保您使用的组件history.push正在从连接的组件或使用withRouter接收路由器道具。有关how to programmatically navigate using React-router

的详细信息，请查看此答案

Answer 2

试试这个：

this.props.history.push(`/search?item-name=${this.props.searchQuery}`);

Answer 3

在您的情况下，可以将Redirect与 push 参数一起使用。当按下返回按钮时，它将正确地重定向到上一页。

* push：bool

为true时，重定向会将新条目推入历史记录，而不是替换当前条目。

<Redirect push to={{
      pathname: '/search',
      search: `?item-name=${this.props.searchQuery}`
    }} />

从重定向标记返回 - React Router

3 个答案: