NavLink是React Router库中的一个组件,用于创建带有活动状态的导航链接。它继承自React Router中的Link组件,并添加了一些额外的功能。 使用NavLink组件,可以通过设置activeClassName属性来指定活动状态时的样式类名。当当前页面的URL与NavLink的to属性匹配时,NavLink会自动为其添加该样式类名,从而可以通过CSS样式来区分...
当我们希望给当前的路由添加一个样式的时候,可以使用NavLink模块来代替Link模块 给NavLink添加activeClassName属性,属性名为class名,在样式中定义active样式 App.js import { PureComponent } from "react"; import './App.css' // 引入Route模块 import { NavLink, Route } from 'react-router-dom' import ...
我的应用程序中有 React 路由器NavLinks。其中之一如下:<NavLink exact to = {{pathname: "/", state: {genreId: 0}}} activeClassName = "active-menu" > Movies </NavLink>在中Router,我从 重定向/到/movies/all。问题是重定向后,activeClassName不再有效。其他未重定向的路由都很好。我如何activeClassNam...
}, [userId, push, url]);return(<><StyledNavigation><StyledNavLinkto={`${url}/created-events`}activeClassName="any">Eventos creados</StyledNavLink><StyledNavLinkto={`${url}/assisted-events`}activeClassName="any">Eventos asistidos</StyledNavLink></StyledNavigation><Switch><ProtectedRouteexactpa...
activeClassName: 定义选中状态时应用的类名。当NavLink的to属性与当前页面路径匹配时,活动类将自动添加到链接上。 exact: 默认情况下,如果当前页面路径是以NavLink的to属性开头的,那么链接将被认为是选中状态。但如果设置了exact属性,只有当当前页面路径与NavLink的to属性完全匹配时,链接才会被认为是选中状态。
<NavLink className={({ isActive }) =>isActive ? "light" : ""} to="/about" >About</NavLink> 注意:在light前面需要添加一个空格,不然两个类名拼接在一起就不能触发高亮效果 <NavLink className={({ isActive }) => "list-group-item" + (isActive ? " light" : "")} to="/about" >Abou...
在V6版本react-router-dom中取消了activeClassName属性,官方文档给出了以下使用示例: image 以下为使用例子,在"demo1"和""前要加一个空格,否则当active状态触发时则会返回"demo1demo2"导致css样式不生效。 className={({isActive})=>"demo1"+(isActive?" demo2":"")} ...
那么可以使用react-router-dom中的NavLink这个组件import{NavLink,Route}from'react-router-dom'render(){return(<NavLink activeClassName="myActive"className="list-group-item"to="/about">About</NavLink>// NavLink是要有高亮显示效果的Link标签,activeClassName是你要加给这个标签的class类名)}而当我们有多个Lin...
NavLink 和 PureComponent 一起使用的时候,会出现 激活链接样式(当前页面对应链接样式,通过 activeClassName、activeStyle 设置) 不生效的情况。效果如下: 刷新页面后导航激活样式生效,点击导航链接的时候 url 跳转,但是导航激活样式不生效。 上图效果对应代码: ...
import React from "react"; import { NavLink } from "react-router-dom"; const Navbar = (props) => { return ( <NavLink to="/" activeClassName="active-navlink"> Home </NavLink> <NavLink to="/about" activeClassName="active-navlink"> About </NavLink> <NavLink to="/add-food" active...