React маршрутизатор сохраняет параметры запроса при изменении маршрута и обратно

Question

У меня есть веб-сайт с различными страницами на основе react-router v4.Каждая страница имеет фильтры url query, это означает, что настройки фильтра хранятся в URL-адресе, например mysite.com/page1?filterKey=value.

Моя цель - сохранить значения фильтра в запросе, когда пользователь вернется с другой страницы (mysite.com/page2).

Answer 1

Я вижу только 2 способа - использовать избыточность, как предложил Уилл Дженкинс, или установить состояние в родительском контейнере (либо App.js, либо файл, обрабатывающий ваши маршруты):

• В родительском контейнере определите функцию

setQuery = query => this.setState({query})

• Передайте функцию дочернему компоненту

• В дочернем компоненте, передайте запрос на componentDidMount:

componentDidMount (){
    this.setQuery( decodeURIComponent(querySearch(this.props.location.search).param) )
}

Answer 2

Я нашел другие решения, использующие глобальное состояние на основе react hooks:

const [podcastsUrlSearch, updateGlobalState] = useGlobalState('podcastsUrlSerach')
useLayoutEffect(() => {
  if (!isEqual(props.location.search, podcastsUrlSearch)) {
    updateGlobalState(props.location.search)
  }
  if (podcastsUrlSearch) {
    props.history.replace({ ...props.history.location, search: podcastsUrlSearch })
  }
}, [])

useLayoutEffect(() => {
  updateGlobalState(props.location.search)
}, [props.location.search])