反应路由器4 history.listen永远不会引发火灾

切换到路由器v4和历史记录v4.5.1，现在历史监听器不工作

import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory()

history.listen((location, action) => {
  console.log(action, location.pathname, location.state)  //  <=== Never happens
})

render(
  <Provider store={store}>
    <Router history={history}>
      ...
    </Router>
  </Provider>,
  document.getElementById('root')
)

任何想法为什么它被忽略？

---

由于您正在使用浏览器路由器（使用导入别名路由器，如问题的注释中所述），因此它不关心您传入的历史道具。而不是在内部创建并向路由器分配新的浏览器历史记录。 所以你在Router中使用的历史实例是不一样的。 这就是你的听众无法工作的原因。

导入原始路由器。

import { Router } from 'react-router-dom';

它会像你期望的那样工作。

---

问题是你正在创建自己的历史对象并将它传递给路由器。 但是，React Router v4已经通过this.props为您提供了这个对象。 （导入路由器与此无关）

componentDidMount() {
    this.props.history.listen((location, action) => console.log('History changed!', location, action));
}

您可能需要为您的应用多添加一层，如下所示，并将此componentDidMount方法放在MyApp.jsx中，而不是直接放在最上层。

<Provider store={store}>
    <BrowserRouter>
        <MyApp/>
    </BrowserRouter>
</Provider>

（或者如果您在使用React Native，则使用NativeRouter而不是BrowserRouter）

链接地址: http://www.djcxy.com/p/96319.html

上一篇: React router 4 history.listen never fires

下一篇: Suddenly getting 403 (Forbidden) with Oauth 2.0 consent on YouTube V3 API