已解决:activeClassName 反应路由器

React Router 中与 activeClassName 相关的主要问题是它不会在路由发生变化时自动更新活动类。 这意味着开发人员必须在路由更改时手动更新活动类,这既耗时又容易出错。 此外,如果多个路由相互嵌套,则很难跟踪当前处于活动状态的路由以及应将哪些类应用到每个元素。

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

1. 组件用于在 React 中创建一个路由器,允许用户在不同页面之间导航。

2. 组件用于创建一个链接,单击该链接会将用户带到“to”属性中指定的页面(在本例中为“/about”)。

3. activeClassName 属性指定当链接处于活动状态(在本例中为“活动”)时应应用的类。

什么是 NavLink

NavLink 是 React Router 中使用的 React 组件,用于在应用程序中的不同路由之间创建导航链接。 它类似于 Link 组件,但它会在匹配当前 URL 时为呈现的元素添加样式属性。 NavLink 还提供了一个 activeClassName 道具,可用于在链接的路由处于活动状态时应用类名。

activeClassName 属性

React Router 中的 activeClassName 属性用于指定一个类名,当它与当前 URL 匹配时将应用于该元素。 当链接或导航项与当前路线匹配时,这对于样式化链接或导航项很有用。 它还可以用于向与路由没有直接关系的元素添加额外的样式,例如突出显示导航栏中的当前活动选项卡。

为什么 activeClassName 不起作用

ActiveClassName 是 React Router 的一项功能,它允许您将类添加到导航菜单中的活动链接。 不幸的是,它在 React Router 中不起作用,因为它依赖于浏览器的历史记录 API,而 React Router 中没有。 这意味着 React Router 无法检测用户何时单击链接并相应地应用 activeClassName。

相关文章:

发表评论