阻止用户使用React Router 4导航到路由

Question

我正在使用ReactiveSearch中的DataSearch进行自动填充和查询提交。我想防止用户浏览（通过在浏览器地址栏中键入）结果路由（example.com/results）。如何检查DataSearch组件中的表单是否为脏或表单输入中是否存在值（用户输入的查询）？

这是我的本地路线的DataSearch组件

<DataSearch
  placeholder="Search..."
  componentId="q"
  dataField={["firstname"]}
  className="autocomplete-search-bar"
  icon={(<i className="fa fa-search fa-lg search-icon"></i>)}
  showClear={false}
  iconPosition="right"
  style={{}}
  innerClass={{title: "text-title",input: "text-input",list: "text-item"}}
  react={{ "or": ["q"] }}
  onValueSelected={(value, cause, source) => {
      if (cause !== 'SUGGESTION_SELECT') {
        // use this query
        console.log('use this query - onValueSelected: ', this.query);
        this.setState({ redirect:true, value: value });
        this.props.history.push(`/search?q="${value}"`);
    } else {
      this.valueSelected = true;
      this.setState({ value });
    }
  }}
  onQueryChange = {(prevQuery, nextQuery) => {
      this.query = nextQuery;
      if (this.valueSelected) {
        // use this query
        console.log('use this query - onQueryChange: ', this.query);
        this.valueSelected = false;
        this.setState({
          redirect: true
        });
      }
    }}
  />

以及我用于查询提交的重定向

if (redirect ) {
  return (
    <Redirect
      to={{
        pathname: '/search',
        search: `?q="${value}"`
      }}
    />
  );