Должен ли я добавлять параметры к моему URL-адресу вне React Router?
Я использую реактивный маршрутизатор v4, и у меня есть страница с несколькими компонентами.
- Площадь фильтра
- Область результатов
- Объявления
Теперь, когда пользователь снимает флажок (например, Ford), область результатов должна заполняться результатами, которые имеют производитель Ford.
Однако у меня есть одно требование: я должен иметь возможность скопировать URL-адрес, а затем вставить его в новую вкладку, и должны появиться такие же результаты.
Я, конечно, собираюсь сделать почти то же, что и все остальные, и добавить критерии к URL-адресу.
/results?manufacturer=Ford
Я собирался использовать реагирующий маршрутизатор для этого
this.props.history.replace(path)
однако это, похоже, вызывает повторную визуализацию страницы (включая ComponentsDidMount), и мне интересно, не было бы более эффективным изменить URL-адрес за пределами реагирующего маршрутизатора, чтобы остановить эту повторную визуализацию.
В любом случае мне придется повторно выполнить рендеринг, так как состояние будет меняться, когда они установят флажок.
Однако мне интересно, выполняю ли это способ реагирования маршрутизатора, если я вызываю больше, чем то, что необходимо для рендеринга (т.е. все ComponentsDidMount обновятся, все на странице, вероятно, будет повторно отображаться, как компоненты рекламы ???) как по сути, кажется, что я почти обновляю страницу.
Редактировать
Я знаю, какой бы способ я ни придумал, мне придется обрабатывать кого-то, копирующего URL-адрес в новый браузер / вкладку чего-либо, и при загрузке должен будет его прочитать.
Моя проблема прямо сейчас, когда я устанавливаю флажок, кажется, делая эту строку в моем обработчике onChange
this.props.history.replace(path)
страница полностью обновляется, и мне это кажется неэффективным.
Я попытаюсь создать пример кода, но я не уверен, как настроить все библиотеки и прочее, чтобы этот пример работал.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Так что на самом деле React Router просто вылетает из окна после того, как вы копируете URL-адрес и вставляете новую вкладку, он просто не предназначен для этой цели.
Для поддержания результатов вы можете:
Добавьте в конструктор метод для получения параметров из URL-адреса, если они существуют, затем автоматически установите флажок и добавьте результаты.
Создайте динамическую маршрутизацию для React Router, чтобы вы могли получить ее немного проще из
this.props.match.params, но вам все равно придется обрабатывать ее при загрузке страницы
Тем не менее, динамические маршруты намного приятнее, если вы не знаете, как их делать, простой пример:
- Определите свой маршрут как
search/:manufacturer/results - При нажатии на поле обновите свою историю до
/search/ford/results - Проверьте свой
this.props.match.params.manufacturer, чтобы узнать стоимость
Надеюсь, это поможет!
Я согласен, что с динамическими маршрутами они лучше, но я не уверен, как обрабатывать несколько вариантов (например, они могли бы использовать ford и honda, будет ли это выглядеть как /search/ford/hond/.../results). Как насчет годовых диапазонов.
При этом вы бы не использовали динамические маршруты, это определенно сценарий Query Params, когда у вас есть несколько таких вариантов. Просто пропустите их через историю, когда пользователь обновит, и он будет отображаться в строке URL ... затем на componentDidMount () проанализируйте строку запроса, если есть какие-либо параметры, и обработайте ее соответствующим образом :)
Вы можете использовать приведенный ниже.
this.props.history.push(`/search/ford/results`);
Или, как вы сказали, поскольку вы установите флажок, в зависимости от этого значения вы можете сделать это:
this.props.history.push(`/search/${value}/results`);
Вам нужно передать значение флажка в значение. т.е. форд и т. д.
Надеюсь, это сработает для вас.
не будут ли они по-прежнему выполнять полный повторный рендеринг (т.е. почти полное обновление страницы со всем жизненным циклом)
Также пользователь может проверить несколько производителей, таких как (ford, honda, Toyota), и у меня будут X-фильтры, которые меняются. Так что я не уверен, что делаю это таким образом, как я могу выразить это динамически.
Да, вы можете добавлять эти значения динамически.
Я имею в виду использование цикла и динамического использования этого history.push для каждого условия.
но как мне сделать маршрут таким, чтобы он соответствовал этому? поскольку это не только "толкающая" часть, то маршрут также должен соответствовать.
Да, я понимаю, что мне нужно будет захватить его, если кто-то скопирует URL-адрес и поместит его в новую вкладку. Моя проблема в том, что даже если они находятся на одной вкладке, как только я делаю .push / replace, кажется, что происходит весь жизненный цикл страницы, и мне это кажется неэффективным.