Как обновить match.params?

Question

В приложении «Реакция» есть страница поиска. Есть вход. Путь «поиск /: запрос», и по умолчанию вы видите ноль результатов. Если вы перейдете к «search / star% 20wars», вы увидите некоторые результаты. В componentDidMount() я добавил оператор if для загрузки результата, если match.params.query не равно нулю.

Если я ввожу в поисковую информацию Человек-паук и нажимаю кнопку Отправить - я запускаю поиск и показываю результаты. Но если вы перезагрузите страницу - вы увидите результат о Star Wars . Так как же обновить match.params.query? Или может быть другое решение исправить это.

Answer 1

@ misha-from-lviv Я вижу, что ваша проблема состоит в том, что у вас есть два источника правды - это параметры запроса, с помощью которых вы должны обновить свое состояние, а другой - по умолчанию. состояние, которое заполняется из значения по умолчанию ваших фильтров.

Как и @ Akash Bhandwalkar , вам необходимо обновить маршрут, используя History API . Но вам также нужен оркестратор верхнего уровня для вашего состояния приложения, который позволит вам читать и записывать в историю API (изменить ваш маршрут), а также делать XHR / выборку для вас, чтобы получить результаты.

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

Надеюсь, это направляет ваше мышление. Вернитесь сюда, если вам нужно дальнейшее руководство. ?

Ура! ?

Answer 2

Вам также необходимо обновить объект истории.

То, что вы делаете, - это изменение доступного вам объекта истории и вычисление результатов на основе этого объекта. Но когда вы обновите страницу, она все равно будет содержать оригинальный объект истории.

Один из способов сделать это, вам нужно нажать или заменить новый маршрут в истории.

Поскольку поисковая страница evert является новой страницей, поэтому, если вы хотите, чтобы предыдущие страницы сохранялись, вам следует использовать history.push, иначе history.replace

Реализуйте это так:

var routeObj = {
pathname: samePath,
state: sameState,
query: newQuery
}
//push it in your history using which ever routing library you are using.

//For Example: 
router.history.replace(routeObj);

Примечание: не беспокойтесь о скорости рендеринга при изменении истории. Реакт достаточно умен, чтобы справиться с этим. По сути, всякий раз, когда вы проталкиваете маршрут, компонент которого уже смонтирован, он не будет размонтироваться и снова перемонтировать тот же компонент, скорее он просто изменит реквизиты и выполнит его рендеринг. Обратным вызовом для этого случая будет => componentWillReceiveProps

Answer 3

Как правило, вы должны изменить маршрут, когда пользователь нажимает кнопку «Отправить».

// с помощью импорта модулей ES6 {history} из 'response-router'

вы можете использовать функцию pushистории.

query = 'Star Wars'
history.push('search/' + query);