时间戳

首页 > 解决方案 > React 使用没有反应路由器的活动类制作导航栏组件（因为 laravel 路由）

reactjs - React 使用没有反应路由器的活动类制作导航栏组件（因为 laravel 路由）

问题描述

我有一个带有自定义路线的导航组件。现在我想在访问页面时使链接处于活动状态。但我找不到正确的解决方案，因为我也在使用 laravel。所以我需要将 react-router-dom 与 react dom 渲染方法或类似方法一起使用。

我正在使用标题组件中的导航并在我的页面中导入标题组件。

有人知道如何解决这个问题。或者我应该看什么方向。

index.js

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

导航.js

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

我可以制作 10 个不同的页面并为每个页面添加路由，然后将它们呈现在我的索引文件中。但这听起来不太好。

标签： reactjslaravelreact-dom

解决方案

react-router-dom包括一个 NavLink 模块，它将<a/>为您呈现一个元素，并具有一些您可以使用的内置道具。比如activeClassName道具。Route当适当的激活时，这个 className 将应用于元素。

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

当您定义react-router-domRoute to"/some-path"并且这是当前活动的路径时，"active"className 将应用于链接元素。您可以使用这个 className 来更改当前活动链接的样式。

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

推荐阅读