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

Posted 2023-02-22

【中文标题】NavLink 未填充嵌套路由的活动类

【英文标题】：NavLink not populating active class for nested route

【发布时间】：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>
    )

【参考方案1】：

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

即

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