react-router-dom5活动类

Question

我正在react-router-5中创建基本路由

<Router>
  <div>
    <Navbar />
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
</Router>

在navbar.js中，就像这样

<nav className="navbar navbar-expand-lg navbar-light bg-light">
      <a className="navbar-brand" href="/home">
        Good Site
      </a>
      <div className="collapse navbar-collapse" id="navbarSupportedContent">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item">
            <NavLink
              className="nav-link"
              to="/"
              activeClassName="active-link"
            >
              Home
            </NavLink>
          </li>
          <li className="nav-item">
            <NavLink
              className="nav-link"
              to="/about"
              activeClassName="active-link"
            >
              About
            </NavLink>
          </li>
          <li className="nav-item">
            <NavLink
              className="nav-link"
              to="/contact"
              activeClassName="active-link"
            >
              Contact
            </NavLink>
          </li>
        </ul>
      </div>
    </nav>

我面临的问题是主路由总是有active-link类。我在这里做错了什么？请帮帮忙。

Answer 1

这是因为所有其他路由都有"/“作为它们的一部分-因此它被选为任何其他所选NavLink的一部分。

如果您在NavLink和路由中放置exact -它应该解决问题，因为路由现在将只匹配所选的路由链接，如果用户没有选择路由，则主页将通过"/“路由链接选择。

 ...
 <li className="nav-item">
    <NavLink
      className="nav-link"
      exact to="/"
      activeClassName="active-link"
    >
      Home
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink
      className="nav-link"
      exact to="/about"
      activeClassName="active-link"
    >
      About
    </NavLink>
  </li>
  ...