Должен ли я добавить параметры в мой URL за пределами React Router?

Question

Я использую реагирующий маршрутизатор v4, и у меня есть страница с несколькими компонентами.

1. Область фильтра
2. Область результатов
3. Реклама

Теперь, когда пользователь снимает флажок (т. Е. Ford), область результатов должна заполняться результатами, имеющимися у производителя Ford.

Одно из требований, которое я имею, заключается в том, что я должен бытьвозможность скопировать URL-адрес, а затем вставить его в новую вкладку, и должны появиться такие же результаты.

Я, конечно, собираюсь сделать то же самое, что и все остальные, и добавить критерии к URL-адресу

/results?manufacturer=Ford

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

this.props.history.replace(path)

, однако это, кажется, вызывает повторный рендеринг страницы (включая ComponentsDidMount), и мне интересно, не будет ли этоболее эффективно изменить URL-адрес за пределами маршрутизатора реагирования, чтобы остановить этот повторный рендеринг.

Мне придется выполнить повторный рендеринг в любом случае, так как состояние будет меняться, когда они отметят флажок.

Однако мне интересно, если делать этореагировать на маршрутизатор, если я вызываю больше, чем нужно для рендеринга (т. е. все ComponentsDidMount будут переопределяться, все на странице, вероятно, будет перерисовываться как рекламные компоненты ???), так как по сути кажется, что я почти обновляюсьстраницы.

Редактировать

Я знаю, каким бы способом я ни придумал, мне придется обрабатывать кого-то, копирующего URL-адрес, в новый браузер / вкладку того, что и при загрузке придется читать.

Моя проблема заключается в том, что сейчас, когда я проверяю флажок, эта строка отображается в моем обработчике onChange

this.props.history.replace(path)

страница полностью обновляется, и это мне кажется неэффективным.

Я попытаюсь создать пример с кодом, но я пока не уверен, как настроить все библиотеки и прочее, чтобы этот пример работал.

Answer 1

Вы можете использовать нижеследующее.

this.props.history.push(`/search/ford/results`);

Или, как вы сказали, так как вы установите флажок, в зависимости от этого значения вы можете сделать это:

this.props.history.push(`/search/${value}/results`);

Вам нужнопередать значение флажка в значение.например, ford и т. д.

Надеюсь, это сработает для вас.

Answer 2

Таким образом, React Router просто выходит из окна, когда вы копируете URL-адрес и вставляете его в новую вкладку, просто он не предназначен для этой цели.

Для сохранения результатов вы можете либо:

1. Добавьте метод в своем конструкторе для получения параметров из URL, если они существуют, затем автоматически установите флажок и добавьте результаты.

2. Создание динамической маршрутизации для ReactМаршрутизатор, так что вы можете получить его немного проще из this.props.match.params, но вам все равно придется обрабатывать его при загрузке страницы

Динамические маршруты намного лучше, хотя, если вы неВы не знаете, как это сделать, простой пример:

1. Определите свой маршрут как search/:manufacturer/results
2. При нажатии на поле обновите свою историю до /search/ford/results
3. Проверьте свои this.props.match.params.manufacturer, чтобы получить значение

Надеюсь, это поможет!