React router dom установил активный класс для NavLink

Я использую React-router-dom для навигации

Routes.js

<Router>
      <Switch>
        <Route path = "/" exact component = {HomePage} activeClassName = "routeActive"/>
        <Route path = "/login" exact component = {Login} activeClassName = "routeActive"/>
        <Route path = "/category/veg" exact component = {Veg} activeClassName = "routeActive"/>
        <Route path = "/category/non-veg" exact component = {NonVeg} activeClassName = "routeActive"/>
      </Switch>
    </Router>

то в моем компоненте Navbar у меня есть

<div className = "leftNavItems">
          <ul className = "navItemsUL">
            <li className = "navItemsLI">
              <NavLink to = "/" exact className = "linkText" activeClassName = "routeActive">
                Home
              </NavLink>
            </li>
            <li className = "navItemsLI">
              <NavLink to = "/login" exact className = "linkText" activeClassName = "routeActive">
                About us
              </NavLink>
            </li>
            <div className = "dropdown">
              {console.info(props)}
              {props.location}
              <span className = {` linkText`}>Categories </span>
              <i className = "fas fa-caret-down downIcon" />
              <div className = "dropdownContent">
                <ul className = "dropdownContentUL">
                  <li className = "dropdownContentLI">
                    <Link to = "/category/:veg" className = "dropdownLinkText">
                      Veg
                    </Link>
                  </li>
                  <li className = "dropdownContentLI">
                    <Link to = "/category/:non-veg" className = "dropdownLinkText">
                      Non Veg
                    </Link>
                  </li>
                </ul>
              </div>
            </div>
          </ul>
        </div>

так что, как вы можете видеть, я использовал «activeClassName» для Navlink, чтобы установить className, а затем изменить его цвет, если он активен, но есть случай, когда у меня есть метка «Категория», которая имеет раскрывающееся меню, содержащее для «veg» и "non-veg", так что я хочу также изменить цвет метки "Category", когда пользователь находится либо в /category/veg, либо в /caegory/:non-veg, поскольку это компонент Navbar console.info( props.location) здесь не определено, потому что я полагаю, что это не так. Любой другой способ здесь >

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
415
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

во-первых, примерно console.info(props.location) превращается в undefined, вы уверены, что обернули компонент withRouter? также, если это функциональный компонент, вы можете использовать хук let location = useLocation()

во-вторых, вы можете управлять именем класса вручную, например

   <span className = {`${props.location.pathname.split('/').includes('category') ? 'routeActive' : 'linkText' }`}>Categories </span>

Другие вопросы по теме