Question

每次尝试更改URL时，我都试图运行一个函数。基本上，我有一个包含搜索表单的导航栏。用户搜索时，它将更新网址以反映用户输入的数据：

this.props.history.push(`/searchusers?q=${this.state.searchBarData}`)

这会将用户推到/searchusers页

在/searchusers页面上，我想添加一个侦听器，以检查页面的url更新时间（即用户是否在搜索栏中输入了更多数据）。我在/searchusers页上使用以下代码初始化监听器：

componentDidMount(){
    window.addEventListener('hashchange', console.log("changed"), false)
}

该函数在组件最初加载时运行，但是在此后更改URL时不起作用。有什么想法我可能会出错吗？谢谢！

Answer 1

如giuseppedeponte所说，主要的明显问题是：

componentDidMount(){
    window.addEventListener('hashchange', console.log("changed"), false)
}

当组件挂载console.log（'changed'）且处理程序为undefined（控制台日志的返回值）时。

替换为：

componentDidMount(){
    window.addEventListener(
        'hashchange',
        function () {
            console.log("changed")
        },
        false
    );

}

每次哈希更改时，都会调用控制台日志。

这导致我们遇到第二个问题：

this.props.history.push(`/searchusers?q=${this.state.searchBarData}`)

这实际上并没有更改url的哈希，但是查询字符串and according to msdn不会触发hashchange事件。

This stackoverflow question可能会帮助您通过history.push

跟踪历史记录更改

React.js-window.addEventListener hashchange仅在组件初始加载时有效

1 个答案: