React - 根页面上的活动类答案

【问题标题】：React - activeclass on root pageReact - 根页面上的活动类
【发布时间】：2018-10-25 13:13:57
【问题描述】：

我正在创建简单的导航菜单，我想让 NavLinks 将属性 activeClassName 设置为激活的路线。我的根页面有问题。每当我单击其他链接时，都会正确添加 Active 类，但不会从根 NavLink 中删除活动类。

<ul className="container navigation right">
              <li>
                <NavLink activeClassName='active' to="/">Strona Domowa</NavLink>
              </li>
              <li>
                <NavLink  to="/galeria">Galeria</NavLink>
              </li>
              <li>
                <NavLink to="/kontakt">Kontakt</NavLink>
              </li>
            </ul>

路线

<Switch>
            <Route exact path="/" component={MMPStudio} />
            <Route exact path="/galeria" component={Gallery} />
            <Route exact path="/kontakt" component={Contact} />
            <Route exact path="/fotobudka" component={Fotobudka} />
            <Route exact path="/jubiler" component={Jubiler} />
            <Route
              exact
              path="/fotobudka/kontakt"
              component={FotobudkaContact}
            />
            <Route exact path="/jubiler/galeria" component={JubilerGallery} />
            <Redirect from="*" to="/" />
          </Switch>

【问题讨论】：

根 NavLink 仍然匹配子路径的前缀。您需要添加 exact 属性以仅匹配确切路径。
为您编辑的路线路径

标签： html reactjs

【解决方案1】：

您还需要在 NavLink 上指定 exact 以使它们与确切的 url 匹配。

<NavLink activeClassName='active' exact to="/">Strona Domowa</NavLink>

来自文档：https://reacttraining.com/react-router/web/api/NavLink/exact-bool

精确：布尔值

当为 true 时，只有在以下情况下才会应用活动的类/样式位置完全匹配。

【讨论】：