DataSearch и RR Redirect - PullRequest
Новая
       12

DataSearch и RR Redirect

0 голосов
/ 21 сентября 2018

Я использую поисковые компоненты ReactiveSearch для создания приятного пользовательского интерфейса для моего поискового приложения.Я использую prop onQueryChange для вызова функции, которая используется для маршрутизации на страницу результатов поиска после того, как пользователь отправил поисковый запрос.

Как я могу использовать React Router v4 для перенаправления на страницу результатов поиска после того, как пользователь получилотправил запрос с компонентом DataSearch?

Пока у меня есть 

<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 }
    }}/>
  }

1 Ответ

0 голосов
/ 24 сентября 2018

Для перенаправления было бы лучше использовать onValueSelected ( документы ), поскольку запрос будет меняться каждый раз, когда вы вводите что-то в поле поиска (чтобы получить предложения).

ВЧтобы обработать перенаправление декларативно с помощью React router 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>
    );
  }
}

Альтернативным способом будет использование withRouter компонента более высокого порядка из React Router, но вышеуказанный метод также будет работать.

...