NavLink 未填充嵌套路由的活动类答案

【问题标题】：NavLink not populating active class for nested routeNavLink 未填充嵌套路由的活动类
【发布时间】：2021-02-26 00:46:31
【问题描述】：

我有一个 NavBar，它根据选择的页面更改它的活动类。我有一个名为“军官”(/officers) 的页面，其中嵌套了多年的路线。（/officers/2020、/officers/2019 等）NavBar 对路线 /officers 处于活动状态，但是当我执行任何嵌套路线时，活动类就会消失。我假设我只需要将 Nav.jsx 上的 to= 更改为其他内容，但我无法找到任何内容，并且我想保留它默认为 /officers 路由的功能。

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

【问题讨论】：

标签： javascript reactjs react-router jsx react-router-dom

【解决方案1】：

要保持/officers 的导航链接处于活动状态而不考虑嵌套属性，请删除属性exact。

即

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

【讨论】：