React делает компонент навигационной панели с активным классом без реагирующего маршрутизатора (из-за маршрутизации laravel)

У меня есть компонент навигации с пользовательскими маршрутами. Теперь я хочу сделать ссылку активной при посещении страницы. Но я не могу найти правильное решение, потому что я также использую laravel. Итак, что мне нужно, это использовать react-router-dom с методом рендеринга react dom или что-то в этом роде.

Я использую навигацию в компоненте заголовка и импортирую компонент заголовка на свои страницы.

Есть ли у кого-нибудь идеи, как это исправить. Или в каком направлении мне смотреть.

index.js

if(document.getElementById('home__page')) {
  ReactDOM.render(
  <Home />,
  document.getElementById('home__page')
);

nav.js

<nav>
  <ul><li>home</li></ul>
</nav>

Я мог бы создать 10 разных страниц и добавить маршрутизацию к каждой из них, а затем отобразить их в своем индексном файле. Но это звучит не очень.


reactjs react-dom laravel
person DutchPrince    schedule 07.05.2019    source источник
comment
Вы используете react-router-dom ?   -  person Vencovsky    schedule 07.05.2019
comment
Используя Css, решите это - ‹style› a:active { background-color: yellow} ‹/style›   -  person Ankit Verma    schedule 07.05.2019
comment
Хм, но мои страницы написаны в реакции, как я могу использовать элемент реакции dom для получения по идентификатору с помощью реагирующего маршрутизатора dom? ‹маршрутизатор›‹/маршрутизатор›   -  person DutchPrince    schedule 07.05.2019
comment
да стиль вариант, спасибо! но мне нужно будет использовать разные селекторы идентификаторов, чтобы выбрать правильную ссылку, я бы предпочел способ реквизита.   -  person DutchPrince    schedule 07.05.2019
comment
Кто-нибудь знает, где искать решение или хотя бы некоторые документы?   -  person DutchPrince    schedule 07.05.2019
comment
Проверьте эту ссылку, которой я делюсь — codepen.io/k3no/pen/OXgXOb?editors=1010< /а>   -  person Ankit Verma    schedule 08.05.2019

Ответы (2)


arrow_upward
0
arrow_downward

react-router-dom включает модуль NavLink, который будет отображать для вас элемент <a/>, и имеет некоторые встроенные реквизиты, которые вы можете использовать. Например, реквизит activeClassName. Это className будет применяться к элементу, когда соответствующий Route активен.

<NavLink to="/some-path" activeClassName="active">Link</NavLink>

Когда вы определяете маршрут react-router-dom к "/some-path", и это текущий активный путь, имя_класса "active" будет применено к элементу ссылки. Вы можете использовать это className, чтобы изменить стиль для текущих активных ссылок.

См. пример здесь в документации: https://reacttraining.com/react-router/web/guides/basic-components/navigation

person Luuuud    schedule 07.05.2019
comment
Я получаю сообщение «Невозможно прочитать местоположение» неопределенной ошибки при использовании реагирующего маршрутизатора dom, я думаю, потому что я маршрутизирую через laravel - person DutchPrince; 07.05.2019

arrow_upward
0
arrow_downward

мое решение использует jquery для управления элементами dom после загрузки

    $(function () {
        const menuLink = location.pathname;
        if (menuLink === '/') {
            $('.menu a[href^="/"]').first().addClass('active');
        } else {
            $('.menu a[href^="/' + menuLink.split("/")[1] + '"]').addClass('active');
        }
    });
person DutchPrince    schedule 07.05.2019