Блог

Я создаю базовую маршрутизацию в 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 класс. Что я здесь делаю не так? Пожалуйста, помогите.

Это происходит из-за того, что все другие маршруты имеют «/» как часть их — поэтому он выбирается как часть любой другой выбранной NavLink.

Если вы добавите exact свою NavLink, а также в маршрут — это должно решить проблему, поскольку маршрут теперь будет соответствовать только выбранной ссылке маршрута, и если пользователь не выбирает маршрут, тогда домашняя страница будет выбрана через ссылку маршрута «/».

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