Question

我正在使用ReactiveSearch搜索组件为我的搜索应用程序构建一个不错的UI。我正在使用道具onQueryChange来调用一个函数，该函数用于在用户提交搜索查询后路由到搜索结果页面。

在用户使用DataSearch组件提交查询后，如何使用React Router v4重定向到搜索结果页面？

到目前为止我有

<DataSearch
  ..
  onQueryChange={
    (prevQuery, nextQuery) => {
      console.log("prev query: ", prevQuery);
      console.log("next query: ", nextQuery);
      { nextQuery !== '' &&  
      <Redirect to="/results"/>,
       }
      }
    }

我查看了here并尝试针对我的用例进行更改。但是，它不起作用。

UDPATE：

关于我在下面的评论。我记得我之前曾问过类似的问题，所以我去了我的个人资料，看看是否可以找到它，而我做到了。我将该信息与this结合在一起，我相信我能够提出解决方案：

if (redirect) {
  return <Redirect to={{
     pathname: '/search',
     state: { pathname: this.state.redirect }
    }}/>
  }

Answer 1

对于重定向，最好使用onValueSelected（docs），因为每当您在搜索框中键入某些内容（为了获取建议），查询都会改变。

为了用React Router 4声明式处理重定向，您将在选择一个值时更新父组件的state并有条件地从react路由器呈现Redirect组件。例如，

Demo

class Main extends Component {
  state = {
    redirect: false
  };

  render() {
    const { redirect } = this.state;
    if (redirect) {
      // when this renders it would redirect to the specified route
      return <Redirect to="/search" />;
    }
    return (
      <ReactiveBase
        ...
      >
          <DataSearch
            ...
            onValueSelected={(value, cause, source) => {
              // just setting the redirect state to true for redirection
              this.setState({
                redirect: true
              });
            }}
          />
      </ReactiveBase>
    );
  }
}

另一种方法是使用React Router中的withRouter个高阶组件，但上述方法也可以使用。

数据搜索和RR重定向

1 个答案: