NavLink not populating active class for nested route

Question

I have a NavBar which changes it's active class based on which page is selected. I have a page called Officers (/officers), which has nested routes for years ex. (/officers/2020, /officers/2019, etc.) The NavBar goes active for the route /officers but when I do any of the nested routes the active class goes away. I assume I just need to change the to= on Nav.jsx to something else, but I haven't been able to find anything, and I would like to retain the functionality that it defaults to the /officers route.

Nav.jsx:

            <NavLink
                exact
                activeClassName="nav active"
                className="nav"
                to="/officers"
            >
                <a id="nav-link-officers" href="officers">Officers</a>
            </NavLink>

App.jsx:

                    <Nav />
                    <Route path="/officers" component={Officers}>
                        {/* TODO: Fix Year Selector */}
                        {/* TODO: Fix Nav for nested routes */}
                        <Officers></Officers>
                    </Route>

Officers.jsx:

function Officers() {
    return (
        <div id="content">
        <link rel="stylesheet" type="text/css" href="../css/officers.css" />
        <div className="col-sm-8 col-lg-8 fadein">
            <div className="jumbotron main-content padded">
            <div className="container-fluid">
                <div className="navblock">
                <ul className="navbar">
                    {/* Ignore this... I was testing another menu */}
                    <NavLink
                        exact
                        activeClassName="activeclass"
                        to="/officers/2020"
                    >
                        <a href="/">2020</a>
                    </NavLink>
                    {/* <li><Link to="/officers/2020">2020</Link></li> */}
                    <li><Link to="/officers/2019">2019</Link></li>
                    <li><Link to="/officers/2018">2018</Link></li>
                    <li><Link to="/officers/2017">2017</Link></li>
                    <li><Link to="/officers/2016">2016</Link></li>
                    <li><Link to="/officers/2015">2015</Link></li>
                </ul>
                </div>
                <Route path="/officers" component={Officers2020} />
                <Route path="/officers/:id" component={OfficerYear} />
            </div>
            </div>
        </div>
        </div>
    )
}

Answer 1

To keep the /officers's Navlink active regardless of nested properties, remove the property exact.

ie

        <NavLink
            activeClassName="nav active"
            className="nav"
            to="/officers"
        >
            <a id="nav-link-officers" href="officers">Officers</a>
        </NavLink>