Question

我有一个基于static react-router的不同页面的网站。每个页面都有基于v4 url的过滤器，这意味着过滤器设置像query一样存储在url上。

我的目标是在用户从另一个页面（mysite.com/page1?filterKey=value返回）时保留查询中的过滤器值。

Answer 1

我看到的仅有的两种方法是按照Will Jenkins的建议使用redux，或者在父容器（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])

Answer 3

例如，使用下拉列表作为过滤器

使用-> localStorage.setItem（“ companyDrpDwnValue”）

onChange事件上

并调用下面的方法来初始化要过滤表的ComponentDidMount上的参数

并使用filter参数过滤数组以获取过滤后的数组

当更改路由和返回时，React路由器保留查询参数

3 个答案: