React make navbar component with active class without react router (because of laravel routing)

Question

我有一个带有自定义路线的导航组件。现在我想做 link 访问页面时处于活动状态。但我找不到正确的解决方案因为我也在用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 个不同的页面并为每个页面添加路由，然后将它们呈现在我的索引文件中。但这听起来不太好。

Answer 1

react-router-dom 包括一个 NavLink 模块，它将为您呈现一个 <a/> 元素，并有一些您可以使用的 built-in 道具。例如 activeClassName 道具。当适当的 Route 处于活动状态时，该类名将应用于元素。

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

当您定义到 "/some-path" 的 react-router-dom 路由并且这是当前活动路径时，"active" className 将应用于 link 元素。您可以使用此类名称更改当前活动 links.

的样式

参见文档中的示例：https://reacttraining.com/react-router/web/guides/basic-components/navigation

Answer 2

我的解决方案是在加载后使用 jquery 操作 dom 个元素

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

React make navbar component with active class without react router (because of laravel routing)

React make navbar component with active class without react router (because of laravel routing)

reactjs

laravel

react-dom