React Router: запрос Param Match?
Согласно принятому ответу на этот вопрос, React Router 4 больше не соответствует параметрам запроса. Если я перейду с URL-адреса, совпадающего с одним из моих <Route>, на тот же URL-адрес с другой строкой запроса, содержимое, похоже, не изменится. Я считаю, что это связано с тем, что переход между URL-адресами, соответствующими одному и тому же <Route>, не меняет содержимое, но, пожалуйста, поправьте меня, если я ошибаюсь. Учитывая это, как мне использовать React Router для набора URL-адресов, которые должны отличаться только параметром запроса?
Например, многие поисковые системы и другие сайты, использующие панели поиска, включая сайт, над которым я работаю, используют параметр запроса, обычно q или query. Пользователь может искать что-то одно, затем решить, что это не то, что ему нужно, и искать другое. Пользователь может ввести второй URL-адрес или снова выполнить поиск в строке поиска. На самом деле в пути URL-адреса нет места для поискового запроса, поэтому он должен быть в строке запроса. Как нам справиться с этой ситуацией?
Есть ли способ с помощью React Router связать URL-адрес, который отличается только строкой запроса, и изменить содержимое, не обновляя всю страницу? Желательно, чтобы для этого не требовалась какая-либо внешняя библиотека, кроме React и React Router.
Извините, я делал это на своем телефоне ночью, когда возвращался домой из отпуска. (Я не был за рулем.) Мои компоненты также немного сложнее, чем учебники по реакции, но я постараюсь получить демо.
Ответы 2
Попробуйте использовать Функция render опора вместо component в Route. Что-то вроде этого:
<Route render = {props => {
// look for some param in the query string...
const useComponentA = queryStringContains('A');
if (useComponentA) {
return <ComponentA {...props}/>;
} else {
return <ComponentB {...props}/>;
}
}}/>
Я делаю это с некоторыми другими компонентами. Я не думал об этом в этой ситуации. Даже если бы я это сделал, я бы не подумал, что это сработает, но это работает!
@AmerllicA Я вас не совсем понимаю, вы спрашиваете, действительно ли мой ответ работает? Я сам этим не пользовался, вы можете спросить ОП, как это происходит в его проекте.
что это за метод queryStringContains? из какого файла вы его импортируете? реагировать-роутер?
@theprogrammer Это какой-то псевдокод, означает, что вы должны расширить его до нескольких строк, которые выполняют то, что описывает это имя функции. Чтобы быть более прямым, замените queryStringContains('A') чем-то вроде window.location.search.includes('A').
Это можно сделать двумя способами:
1) Используйте location.search в компоненте реакции, чтобы получить строку запроса, затем передайте ее дочернему компоненту, чтобы предотвратить повторную визуализацию всего компонента. React-router имеет об этом официальный пример.
2) Определите путь регулярного выражения маршрутизатора, чтобы перехватить строку запроса, а затем передать ее компоненту реакции. Возьмем, к примеру, разбиение на страницы:
routes.js, для конфигурации маршрутизатора вы можете обратиться к это
const routerConfig = [
{
path: '/foo',
component: 'Foo',
},
{
path: '/student/listing:pageNumber(\\?page=.*)?',
component: 'Student'
},
Student.js
render() {
// get the page number from react router's match params
let currentPageNumber = 1;
// Defensive checking, if the query param is missing, use default number.
if (this.props.match.params.pageNumber) {
// the match param will return the whole query string,
// so we can get the number from the string before using it.
currentPageNumber = this.props.match.params.pageNumber.split('?page=').pop();
}
return <div>
student listing content ...
<Pagination pageNumber = {currentPageNumber}>
</div>
}
Pagination.js
render() {
return <div> current page number is {this.props.pageNumber} </div>
}
Второе решение длиннее, но более гибкое. Один из вариантов использования - рендеринг на стороне сервера:
Помимо компонентов реакции, остальная часть приложения (например, предварительно загруженная сага) должна знать URL-адрес, включая строку запроса, для вызова API.
Можете ли вы предоставить код, чтобы мне было легче увидеть, что вы пытаетесь сделать