javascript - 不会触发 @@router/LOCATION_CHANGE 操作

Question

我在点击react-router <NavLink />时遇到问题成分。目前，单击它时会导航到正确的页面，但 redux 中没有触发任何操作。 )。

历史对象更新。我可以这么说，因为后退/前进按预期工作(在 redux-logger 中触发操作)。

这是删除的代码:

import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';

import NavMenu from './NavMenu';

const Nav = () => {

  return (
    <aside>
      <NavMenu />
      <NavFooter>
        <NavLink to={`/terms-and-conditions`}> // Not firing redux-logger actions, but navigates to the correct page
          Terms and conditions
        </NavLink>
      </NavFooter>
    </aside>
  );
};

export default connect()(Nav);

首次加载时以及按下浏览器的后退/前进按钮时，redux 记录器中的路由发生变化:

action @@router/LOCATION_CHANGE // console.log

我到处寻找，但找不到我是否需要进行自定义操作或使用connected-react-router。

感谢帮助

Answer 1

显然，我有<Router />包装我的<Switch />除了 <ConnectedRouter /> 。

如果你想将路由连接到redux store并反射(reflect)redux-logger中的路由变化，你只需要<ConnectedRouter />像这样:

<ConnectedRouter history={history}>
    <Nav />
    <Switch>
       <Route path="/" exact component={Home} />
       <Route path="/about-the-cause" exact component={About} />
       <Redirect to="/" />
    </Switch>
</ConnectedRouter>