React-маршрутизатор не соответствует строке запроса

Мои маршруты определены следующим образом:

 <Router history={browserHistory}>
   <Route path="/" component={App}>
     <Route path="experiments">
       <IndexRoute component={Experiments} />
     </Route>
     <Route path="*" component={NoMatch}/>
   </Route>
 </Router>

Когда я посещаю /experiments, все работает, как и ожидалось, и отображается компонент Experiments. Однако, когда я вручную ввожу URL-адрес с параметрами запроса, например: /experiments?offset=50, маршрут не совпадает!

Но когда я перемещаюсь с помощью <Link to={{ pathname='/experiments', query={offset:50} }} />, все работает как положено. Компонент Experiments отображается, и this.props.location.query.offset устанавливается на 50.

Как сделать так, чтобы маршрут совпадал, когда URL-адрес со строкой запроса вводится вручную (или копируется)?

Кажется, маршрут должен автоматически соответствовать url-with-query-‌​string-not-matching-‌​react-router-route, но, похоже, он не работает для меня.

Редактировать: я сузил проблему до всеобъемлющего маршрута path="*". Когда я удаляю этот маршрут, все работает (например, когда я посещаю /experiments?offset=50). Но никакие маршруты не совпадают, когда присутствует универсальный маршрут, даже если он находится в нижней части списка приоритетов.


reactjs react-router react-router-redux
person saiprashanth    schedule 22.12.2016    source источник
comment
Пожалуйста, вернитесь и отредактируйте свой пост, а не добавляйте новую информацию в комментарий. См.: Как спросить и, пожалуйста, покажите минимальный воспроизводимый пример в следующий раз. Вы также даже не удосужились завершить двухминутный тур по сайту, прежде чем спросить.   -  person T-Heron    schedule 22.12.2016
comment
Извинения. Я отредактировал свой пост, чтобы добавить новую информацию.   -  person saiprashanth    schedule 22.12.2016
comment
Превосходно. Я только что проголосовал за тебя за это. Однажды вы, возможно, будете редактировать вопросы новых пользователей и рассказывать им те же самые или похожие вещи.   -  person T-Heron    schedule 22.12.2016

Ответы (2)


arrow_upward
0
arrow_downward

Вам нужно использовать historyApiFallback с history={browserHistory} для загрузки вашего маршрута, когда вы вводите его вручную.

что делает historyApiFallback, так это делает так, чтобы ваш сервер возвращал index.html для любого URL-адреса, к которому вы пытаетесь получить доступ, и, поскольку ваши маршруты затем настраиваются в отношении index.html, поэтому вы можете получить прямой доступ к любому URL-адресу маршрута.

В вашем веб-пакете добавьте

devServer: {
    historyApiFallback: true;
}
person Shubham Khatri    schedule 22.12.2016
comment
Я использую create-react-app и полагаю, что он уже использует historyApiFallback. - person saiprashanth; 22.12.2016

arrow_upward
0
arrow_downward

Хорошо, оказывается, это была совершенно не связанная проблема. Я использовал redux-auth, что вызывало перенаправление на неправильный URL-адрес. Это произошло после того, как реактивный маршрутизатор выполнил синтаксический анализ и сопоставление маршрутов. Как только я это исправил, сопоставление маршрутов заработало отлично. Мне удалось проанализировать строку запроса из URL-адреса, такого как /experiments?offset=50, используя конфигурацию маршрута в моем вопросе выше.

person saiprashanth    schedule 23.12.2016