Question

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

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

Answer 1

您还需要在NavLinks上指定exact，以使其与确切的网址匹配。

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

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

确切：bool

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

React-根页面上的ActiveClass

1 个答案: