<NavLink />不触发@@路由器/位置更改操作

Question

我有一个问题，当点击反应路由器<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

我到处找，找不出我是否需要做一个定制的动作或使用连接-反应路由器。

助赏

Answer 1

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

如果要将路由连接到redux存储并反映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>