React router 4 history.listen 永不触发

Question

切换到路由器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')
)

知道为什么它被忽略了吗？

Answer 1

由于您使用的是浏览器路由器(如问题评论中所述，导入别名路由器(，因此它不关心您传入的历史道具。取而代之的是，它在内部创建新的浏览器历史记录并将其分配给路由器。因此，您在路由器中侦听和使用的历史实例是不一样的。这就是为什么你的听众不起作用。

导入原始路由器。

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

它将按您的预期工作。

Answer 2

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

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

不过，您可能需要对应用程序进行更多分层，如下所示，并将此组件DidMount方法放在MyApp.jsx中，而不是直接放在最顶层。

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

(或者如果你正在做 React Native，请使用 NativeRouter 而不是 BrowserRouter(

Answer 3

就像一个魔术： 🧙 ♂️🧙 ♂️🧙 ♂️

const history = useHistory();      
    
     useEffect(() => {
            if (history) { // for jest sake ))
                history.listen(() => {
                    store.reset();
                });
            }
     }, []);