數據搜索和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"/>,
       }
      }
    }

我在這里查看並嘗試針對我的用例進行更改。 但是，它不起作用。

UDPATE：

關於我下面的評論。 我記得我之前曾問過類似的問題，所以我去了我的個人資料，看看是否可以找到它，而我做到了。 我將此信息與此結合在一起，我相信我能夠提出解決方案：

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

Answer 1

對於重定向，最好使用onValueSelected （ docs ），因為每當您在搜索onValueSelected鍵入某些內容時（為了獲取建議）查詢都會更改。

為了使用React Router 4聲明式處理重定向，您將在選擇一個值時更新父組件的state ，並有條件地從React Router呈現Redirect組件。 例如，

演示版

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高階組件一起使用，但上述方法也可以使用。