<NavLink /> 不会触发 @@router/LOCATION_CHANGE 操作

Question

我在点击 react-router <NavLink /> 组件时遇到问题。目前，点击它会导航到正确的页面，但在 redux).

中没有触发任何操作。

历史对象更新。我知道是因为 back/forward 按预期工作（在 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);

首次加载并按下浏览器的 back/forward 按钮时，redux 记录器中的路由发生变化：

action @@router/LOCATION_CHANGE // console.log

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

感谢帮助

Answer 1

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

如果你想将路由连接到 redux store 并在 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>

<NavLink /> 不会触发 @@router/LOCATION_CHANGE 操作

<NavLink /> doesn't trigger @@router/LOCATION_CHANGE action

javascript

reactjs

redux

react-router

connected-react-router