React make компонент navbar с активным классом без реагирующего маршрутизатора (из-за маршрутизации laravel) - PullRequest
Новая
       19

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

1 голос
/ 07 мая 2019

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

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

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

index.js 

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

nav.js 

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

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

Ответы [ 2 ]

0 голосов
/ 07 мая 2019

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

    $(function () {
        const menuLink = location.pathname;
        if (menuLink === '/') {
            $('.menu a[href^="/"]').first().addClass('active');
        } else {
            $('.menu a[href^="/' + menuLink.split("/")[1] + '"]').addClass('active');
        }
    });
0 голосов
/ 07 мая 2019

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

...