Запретить пользователю переход к маршруту с помощью React Router 4 - PullRequest
Новая
       11

Запретить пользователю переход к маршруту с помощью React Router 4

0 голосов
/ 10 января 2019

Я использую DataSearch из ReactiveSearch для автозаполнения и отправки запросов. Я хочу запретить пользователю перемещаться (вводя в адресной строке браузера) маршрут результатов (example.com/results). Как я могу проверить, является ли форма в моем компоненте DataSearch dirty или есть ли значение (введенный пользователем запрос) во входных данных формы?

Вот мой компонент 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}"`
      }}
    />
  );
...