Question

目前，我有一个带有处理程序的组件：

_redirect () {
  hashHistory.push(`/somepath?a=1&b=2`)
}

/somepath的路由组件配置为获取查询参数并将其存储在状态中，如下所示：

class SomeComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      a: this.props.location.query.a || 5,
      b: this.props.location.query.b || -2,
    }
  }

如果我目前处于不同的道路上，那么事情就会完美无缺。我遇到的问题是，如果我已经在/somepath但没有参数并执行处理程序，则参数将被追加到网址（路径更改为/somepath?a=1&b=2在网址栏中），但页面本身不会重新渲染。

我知道构造函数只在初始页面加载时执行，这解释了为什么它不会抓取查询参数并将其存储在状态中，除非它是一个新的重新加载。是否有某种方法可以使页面对hashHistory.push()附加的新参数敏感？

Answer 1

您可以在componentDidMount和componentDidUpdate中获取查询参数。当您第一次路由/somepath时，将调用componentDidMount SomeComponent。然后更改为/somepath?a=1&b=2，componentDidUpdate将被调用（此时componentDidMount将不会被调用。）

请参阅this document。了解它如何从/invoices/123导航到/invoices/789。

React Router：hashHistory追加查询参数不会重新呈现

1 个答案: