时间戳

首页 > 解决方案 > 数据搜索和 RR 重定向

reactjs - 数据搜索和 RR 重定向

问题描述

我正在使用 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 }
    }}/>
  }

标签： reactjsreact-router-v4reactivesearch

解决方案

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

为了使用 React 路由器 4 以声明方式处理重定向，您将在state选择值时更新父组件的，并有条件地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>
    );
  }
}

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

推荐阅读