DataSearch 和 RR 重定向

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 并尝试针对我的用例进行更改。但是，它不起作用。

更新：

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

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

Answer 1

对于重定向，最好使用 onValueSelected (docs)，因为每次您在搜索框中键入内容时查询都会更改（以获取建议）。

为了使用 React 路由器 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 高阶组件，但上述方法也可以。

DataSearch 和 RR 重定向

DataSearch and RR Redirect

reactjs

react-router-v4

reactivesearch