Я использую реагирующий и реагирующий маршрутизатор для своего приложения на стороне клиента. Я не могу понять, как получить следующие параметры запроса из URL-адреса, например:
http://xmen.database/search#/?status=APPROVED&page=1&limit=20
Мои маршруты выглядят так (я знаю, что путь совершенно неправильный):
var routes = (
<Route>
<DefaultRoute handler={SearchDisplay}/>
<Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
<Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);
Мой маршрут работает нормально, но я просто не уверен, как отформатировать путь, чтобы получить нужные мне параметры. Ценю любую помощь в этом!
javascript
reactjs
client-side
react-router
client-side-scripting
Кристофер Робин
источник
источник
getCurrentQuery
willTransitionTo
крючки на рукоятке. Он получает параметры строки запроса. github.com/rackt/react-router/commit/…Ответы:
Примечание: скопировать / вставить из комментария. Обязательно лайкните оригинальный пост!
Написание на es6 и использование react 0.14.6 / react-router 2.0.0-rc5. Я использую эту команду для поиска параметров запроса в моих компонентах:
Он создает хеш всех доступных параметров запроса в URL-адресе.
Обновить:
Для React-Router v4 см. Этот ответ . В основном используйте
this.props.location.search
для получения строки запроса и анализа с помощьюquery-string
пакета или URLSearchParams :источник
query
похоже, пропал в React Router 4. github.com/ReactTraining/react-router/issues/…СТАРЫЙ (до версии 4):
Написание на es6 и использование react 0.14.6 / react-router 2.0.0-rc5. Я использую эту команду для поиска параметров запроса в моих компонентах:
Он создает хеш всех доступных параметров запроса в URL-адресе.
ОБНОВЛЕНИЕ (React Router v4 +):
this.props.location.query в React Router 4 был удален (в настоящее время используется v4.1.1), подробнее о проблеме здесь: https://github.com/ReactTraining/react-router/issues/4410
Похоже, они хотят, чтобы вы использовали свой собственный метод для анализа параметров запроса, в настоящее время используя эту библиотеку, чтобы заполнить пробел: https://github.com/sindresorhus/query-string
источник
TypeError: Cannot read property 'location' of undefined
:: |Приведенные выше ответы не будут работать
react-router v4
. Вот что я сделал для решения проблемы -Сначала установите строку запроса, которая потребуется для синтаксического анализа.
npm install -save query-string
Теперь в маршрутизируемом компоненте вы можете получить доступ к не проанализированной строке запроса следующим образом
this.props.location.search
Вы можете перепроверить это, войдя в консоль.
Наконец, проанализируйте, чтобы получить доступ к параметрам запроса
Итак, если запрос похож на
?hello=world
console.log(parsed.hello)
будет регистрироватьworld
источник
const query = new URLSearchParams(props.location.search); console.log(query.get('hello'));
(для старых браузеров нужен полифилл).обновление 2017.12.25
"react-router-dom": "^4.2.2"
URL как
BrowserHistory
:http://localhost:3000/demo-7/detail/2?sort=name
HashHistory
:http://localhost:3000/demo-7/#/detail/2?sort=name
с зависимостью строки запроса :
полученные результаты:
2 {sort: "name"} home
"react-router": "^2.4.1"
URL как
http://localhost:8080/react-router01/1?name=novaline&age=26
const queryParams = this.props.location.query;
queryParams - это объект, содержащий параметры запроса:
{name: novaline, age: 26}
источник
http://localhost:8090/#access_token=PGqsashgJdrZoU6hV8mWAzwlXkJZO8ImDcn&expires_in=7200&token_type=bearer
(т.е. нет/
после#
), тогда для реактивного маршрутизатора v4 вы должны использоватьlocation.hash
вместоlocation.search
Надеюсь, это поможет :)
Удачного кодирования!
источник
вам не нужно добавлять какой-либо дополнительный модуль только в свой компонент с таким URL-адресом:
http: // localhost: 3000 / # /? авторитет '
вы можете попробовать следующий простой код:
источник
Прочитав другие ответы (сначала @ duncan-finney, а затем @Marrs), я решил найти журнал изменений, который объясняет идиоматический способ решения этой проблемы с помощью response-router 2.x. Документация по использованию местоположения (что вам нужно для запросов) в компонентах фактически противоречат фактическому коду. Поэтому, если вы последуете их совету, вы получите серьезные гневные предупреждения вроде этого:
Оказывается, у вас не может быть свойства контекста с именем location, которое использует тип местоположения. Но вы можете использовать свойство контекста loc, которое использует тип местоположения. Таким образом, решение представляет собой небольшую модификацию их источника следующим образом:
Вы также можете передать только те части объекта местоположения, которые хотите, чтобы ваши дети получили такое же преимущество. Предупреждение о смене типа объекта не изменилось. Надеюсь, это поможет.
источник
Простое решение js:
И вы можете вызвать его откуда угодно, используя:
Надеюсь это поможет.
источник
Вы можете получить следующую ошибку при создании оптимизированной производственной сборки при использовании модуля строки запроса .
Чтобы преодолеть это, используйте альтернативный модуль под названием stringquery, который хорошо выполняет тот же процесс без каких-либо проблем при запуске сборки.
источник