<NavLink> active state does not work with back browser button in React

Question

I have a nav that uses redux for the toggle event however and everything works as expected, it has an active class when the route is correct except when I hit the back button in the browser. When I hit the back button, the page renders correctly except the the active state of the NavLink.

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { NavLink, withRouter } from 'react-router-dom';


import classes from './NavigationItem.css';

import * as actionTypes from '../../../../store/actions';

class navigationItem extends Component {

    constructor(props) {
        super(props);
        console.log('[NavigationItem.js] Inside constructor', props);
    }

    toggleNav(event) {

        this.props.openNavigation();
    }


    render() {
        return (
            <li className={classes.NavigationItem} onClick={ () => this.toggleNav() }>
                <NavLink 
                    to={this.props.link}
                    exact={this.props.exact}
                    activeClassName={classes.active}>{this.props.children}
                </NavLink>
            </li>
        )
    }
};

const mapStateToProps = state => {
    return {
        state: state.isOpened
    }
};

const mapDispatchToProps = dispatch => {
    return {
        openNavigation: (mapStateToProps, mapDispatchToProps) => dispatch({type: actionTypes.OPEN_NAVIGATION})
    }
};

const connectOptions = {
    pure: false
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps, null, connectOptions)(navigationItem));

Answer 1

In my index where I was wrapping my App component, I was importing BrowserRouter but I should have imported it as BrowserRouter as Router, Route . That made all the difference.