Как активировать NavItem для тега привязки с помощью Gatsby и Reactstrap? - PullRequest
Новая
       67

Как активировать NavItem для тега привязки с помощью Gatsby и Reactstrap?

1 голос
/ 29 апреля 2020

У меня есть меню навигационной панели с несколькими пунктами меню на сайте Gatsby, который использует Reactstrap. Пункты меню настроены так, чтобы указывать на теги привязки на этой странице (например, #anchor1). 

<Nav navbar>
    <NavItem>
        <Link to="#anchor1" activeClassName="active" className="nav-link">Anchor 1</Link>
    </NavItem>
    <NavItem>
        <Link to="#anchor2" activeClassName="active" className="nav-link">Anchor 2</Link>
    </NavItem>
</Nav>

Хотя ссылки работают отлично, пункты меню не отображаются как активные: класс active не добавляется в NavItem. Как заставить пункты меню выделяться при переходе к ним пользователя?

1 Ответ

0 голосов
/ 29 апреля 2020

Из Документация Gatsby Link :

Ни <Link>, ни навигация не могут использоваться для навигации по маршруту с параметром ha sh или параметром запроса . Если вам нужно это поведение, вы должны либо использовать тег привязки, либо импортировать пакет @reach/router - от которого Гэтсби уже зависит - чтобы использовать его функцию навигации

Из-за этой несовместимости, я полагаю отсюда ваша ошибка.

Однако вы можете попробовать использовать state при нажатии на ссылку и использовать это состояние для установки имени класса: 

<Link
  to={`/photos/${id}`}
  state={{ fromFeed: true }}
>

Последнее решение, которое будет работать наверняка, это использовать обычный <a> с вашим ha sh в качестве точек документации.

...