Вопрос:

Как вернуть активный класс на NavItem в браузере

reactjs react-router

39 просмотра

1 ответ

146 Репутация автора

В моем приложении я использую реагирующий маршрутизатор 3 Для меню навигации я использовал

<nav>
    <NavItem> </NavItem>
</nav>

Он работает нормально при нажатии навигационного меню, но при возврате с использованием браузера назад URL-адрес изменился, но активный класс не применяется.

Автор: Alex Patel Источник Размещён: 01.01.2018 07:16

Ответы (1)


0 плюса

2018 Репутация автора

Я попытаюсь объяснить, как это должно быть сделано в целом, а не для конкретной структуры. Вы можете реализовать то же самое в любой среде после этого

Для навигации с сохранением состояния вы можете воспользоваться параметрами запроса. все, что вам нужно сделать по щелчку навигационной панели, это добавить некоторое значение к параметрам запроса, которое будет определять его уникальность.

и при инициализации компонента вы должны прочитать параметры запроса и программно выбрать эту вкладку (примените к ней класс css)

Например, у вас есть:

url:somedomain.com/home -- this is where you have navigation
NavItem1 href="somedomain.com/home?nav=tab1"
NavItem2 href="somedomain.com/home?nav=tab2"
NavItem3 href="somedomain.com/home?nav=tab3"

когда компонент инициализируется, вы должны прочитать параметры запроса, если он существует, и дать соответствующий класс конкретномуNavItem

Автор: hannad rehman Размещён: 01.01.2018 07:39
Вопросы из категории :
32x32