代码之家 › 专栏 › 技术社区 › raju

react-router-dom5活动类

react-router-dom reactjs

raju · 技术社区 · 4 年前

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

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

<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 班级。我做错什么了?请帮忙。

1 回复 | 直到 4 年前

gavgrif 4 年前

这是因为所有其他路由都有“/”作为它们的一部分,所以它被选为任何其他选定导航链接的一部分。

如果你把 exact 在NavLink和Route中-应该可以解决这个问题,因为现在的Route只会匹配所选的Route link,如果用户没有选择路由,那么将通过“/”Route link选择主页。

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

推荐文章