与反应路由器的主动链路? ？

小开

最佳答案

对于 反应路由器 v4来说，这是一个过时的答案

<Link>不再具有 activeClassName或 activeStyle属性。在反应路由器 v4中，如果你想做条件样式，你必须使用 <NavLink>:

const Router = () => (
<BrowserRouter>
<div>
<Nav>
<NavLink exact activeClassName='is-active' to='/'>Home</NavLink>
<NavLink activeClassName='is-active' to='/about'>About</NavLink>
</Nav>


<Match pattern='/' exactly component={Home} />
<Match pattern='/about' exactly component={About} />
<Miss component={NoMatch} />
</div>
</BrowserRouter>
)

我添加了一个精确的属性到主页 <NavLink>，我相当肯定，没有它，主页链接将始终是活跃的，因为 /将匹配 /about和任何其他页面你有。

小开

反应路由器 v6:

资料来源: 带有 React 路由器的主动 NavLink 类

现在您可以使用 className属性，它现在接受一个函数并传递一个 isActive布尔属性，如下所示:

<NavLink
to="users"
className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
Users
</NavLink>

你也可以添加多个类，因为 V6已经过时了:

<NavLink
to="users"
className={({ isActive }) =>
isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
}
>
Users
</NavLink>

现场演示: 带有 React 路由器的主动 NavLink 类

小开

作为@Nick 答案的补充(React Router v6) ，对于那些需要上下文中的活动导航状态的用户来说。.

条件呈现可能是需求的用例。对于 ex: 如果它是活动的呈现填充图标，否则呈现普通图标。

这可以通过找到我们当前所在的路径来实现，然后我们可以执行条件渲染操作，但是这会有点麻烦。

相反，我们可以编写一个函数来修改 Navlink样式道具中的状态，如下所示。

  const [active, setActive] = useState('home')


const activate = (isActive, path, activeStyle, nonActiveStyle) => {
if (isActive) {
setActive(path)
return activeStyle
}
return nonActiveStyle
}


return (
<nav>
<NavLink
to="/"
style={(activeNav) => activate(activeNav.isActive, 'home')}
>
{active === 'home' ? <HomeFill /> : <Home />}
</NavLink>
<NavLink
to="/profile"
style={(activeNav) => activate(activeNav.isActive, 'profile')}
>
{active === 'profile' ? <ProfileFilled /> : <Profile />}
</NavLink>
</nav>
)

小开

在我的案例中，<NavLink />自动将 active类设置为条目，因此我使用以下方法

我的组件

<ListItem component={NavLink} to="/somewhere" className="myactive" > something </ListItem>

MyStyle.css

a.active.myactive {
// some styles
}

小开

import { NavLink, useMatch, useResolvedPath } from 'react-router-dom';


const CustomNavLink = ({ to, title }) => {
let resolved = useResolvedPath(to);
let match = useMatch({ path: resolved.pathname, end: true });


return (
<NavLink to={to} className={`d-flex align-items-center py-2 px-4 ${match ? 'cta-btn' : 'c-n-b-link'}`} >
<span className='ms-1 f-w-600'>{title}</span>
</NavLink>
)
}

对于 React router V6，上面的自定义组件将返回导航链接，只要路径与给定的 to路径匹配，就可以激活活动类。

小开

在 react-router-dom Version 5.3.0中，我使用了以下方法来启用活动链接

classes:

active: {
// background: 'linear-gradient(180deg, #008b32 0%, #cddc39 100%)',
// backgroundColor: 'slategray',
borderBottom: '1px solid white',
borderRadius: '6px',
boxShadow: 'rgba(6, 24, 44, 0.4) 0px 0px 0px 2px , rgba(6, 24, 44, 0.65) 0px 4px 6px -1px , rgba(255, 255, 255, 0.08) 0px 1px 0px inset',
color: 'white',
fontSize: '14px',
listStyle: 'none',
marginLeft: '16px',
padding: '5px',
textDecoration: 'none',
textTransform: 'uppercase',
transition: 'all 0.1s cubic-bezier(0.42, 0.02, 0.06, 0.05) 0.1s',
},
link: {
'&:hover': {
borderBottom: '1px solid white',
borderRadius: '6px',
boxShadow: 'rgba(6, 24, 44, 0.4) 0px 0px 0px 2px , rgba(6, 24, 44, 0.65) 0px 4px 6px -1px , rgba(255, 255, 255, 0.08) 0px 1px 0px inset',
color: 'white',
padding: '5px',
transition: 'all 0.1s cubic-bezier(0.42, 0.02, 0.06, 0.05) 0.1s',
},
color: '#ddf1f9',
fontSize: '14px',
listStyle: 'none',
marginLeft: '16px',
textDecoration: 'none',
textTransform: 'uppercase'
},

NavLink.js

import React from "react";
import { useLocation } from "react-router-dom";




const NavLinks = classes => {
const pathname = useLocation().pathname
return (
<nav>
<ul className={classes.navlinks}>
<li>
<Link
className={`${pathname === '/' ? classes.active : classes.link}`}
to='/'
>
Login
</Link>
</li>
<li>
<Link
className={`${pathname === '/dashboard' ? classes.active : classes.link}`}
to='/dashboard'
>
Dashboard
</Link>
</li>
</ul>
</nav>
)
}