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

Question

I am having an issue when clicking on react-router <NavLink /> component. Currently, when clicking it navigates to the correct page but no actions were fired in redux).

The history object updates. I can tell because back/forward works as expected (firing actions in redux-logger).

This is the stripped out code:

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);

When first loading and when pressing browser's back/forward button, there's a route change in redux logger:

action @@router/LOCATION_CHANGE // console.log

I looked everywhere and can't find out if I need to make a custom action or use connected-react-router.

Help appreciated

Answer 1

Apparently, I had <Router /> wrapping my <Switch /> in addition to <ConnectedRouter />.

If you want to connect routes to redux store and reflect routes changing in redux-logger, you only need <ConnectedRouter /> like so:

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