Переадресация в ответном маршрутизаторе

Я пытаюсь установить маршрут маршрута с помощью строки запроса. Что-то в строках:

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3

Я бы перешел к компоненту "Результаты" следующим образом:

<Route path="/" component={Main}>
  <IndexRoute component={Home} />
  <Route path="results?query1=:query1&query2=:query2&query3=:query3"
    component={SearchResults} />
</Route>

В контейнере SearchResults я бы хотел иметь доступ к параметрам query1, query2 и query3.

Я не смог заставить его работать. Я получаю следующую ошибку:

bundle.js: 22627 Внимание: [реактивный маршрутизатор] Местоположение "/results? query1 = 1 & query2 = 2 & query3 = 3" не соответствует маршрутам

Я попытался выполнить следующие шаги в следующем руководстве: (Раздел: Как насчет параметров строки запроса?) https://www.themarketingtechnologist.co/react-router-an-introduction/

Могу ли я получить помощь здесь?

Ответ 1

Если вы используете React Router v2.xx, вы можете получить доступ к параметрам запроса через объект location.query, переданный вашему компоненту Route.

Другими словами, вы можете переработать свой маршрут, чтобы выглядеть следующим образом:

<Route path="results" component={SearchResults} />

И затем внутри вашего компонента SearchResults используйте this.props.location.query.query1 (аналогично для query2 и query3) для доступа к значениям параметров запроса.

EDIT: Это все еще имеет место для React Router v3.xx.

Ответ 2

Если вы используете React Router >= v4 location.query больше не доступен. Вы можете подключить внешнюю библиотеку (например, https://www.npmjs.com/package/query-string) или использовать что-то вроде этого:

const search = props.location.search; // could be '?foo=bar'
const params = new URLSearchParams(search);
const foo = params.get('foo'); // bar

(просто имейте в виду, что URLSearchParams() не поддерживается в Internet Explorer)