Querystring in response-router

Question

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

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 params.

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

bundle.js:22627 Warning: [react-router] Location "/results?query1=1&query2=2&query3=3" did not match any routes

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

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

Answer 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.

Answer 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() не supportd в Internet Explorer)