我正在尝试使用 React 来设计我的导航activeClassName
属性。到目前为止,它按预期工作,但有一个问题 - 我的第一个导航链接指向根路线(/)。因此,即使在另一个 URL 上,它也会将该 URL(例如 /skills)和 root 注册为活动状态(因此 2 个菜单项会被设置样式)。
有一个简单的解决方法吗?我应该将根路由定义为其他路径(例如/home)吗?
我的标题:
import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';
const Header = () => {
return (
<div className="header">
<div className="headerImage"></div>
<ul className="headerNav">
<li className="headerNavLink"><Link to="/" activeClassName="activeLink">introduction</Link></li>
<li className="headerNavLink"><Link to="/skills" activeClassName="activeLink">skills</Link></li>
<li className="headerNavLink"><Link to="/portfolio" activeClassName="activeLink">portfolio</Link></li>
</ul>
</div>
);
};
export default Header;
路线.js:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
//Import app
import App from './components/App';
//Import pages
import IntroductionPage from './components/introduction/IntroductionPage';
import SkillsPage from './components/skills/SkillsPage';
import PortfolioPage from './components/portfolio/PortfolioPage';
//Define routes
export default (
<Route path="/" component={App}>
<IndexRoute component={IntroductionPage} />
<Route path="skills" component={SkillsPage} />
<Route path="portfolio" component={PortfolioPage} />
</Route>
);
因此,为了澄清,我希望我的家乡路线在另一条路线上时不处于活动状态。
我究竟做错了什么?
Thanks
我想参考 React Router 的文档 https://reacttraining.com/react-router/web/api/NavLink/exact-bool (react-router-dom
,目前为 v5) 和sources https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js。
这是实现这一点的最新方法:
exact: bool
如果为 true,则仅当位置完全匹配时才会应用活动类/样式。
<NavLink exact to="/profile">
Profile
</NavLink>
这是一个现实世界的工作示例:
<ul class="nav flex-column">
<li class="nav-item">
<NavLink className="nav-link" activeClassName="active" to="/" exact>Home</NavLink>
</li>
<li class="nav-item">
<NavLink className="nav-link" activeClassName="active" to="/calendar">Calendar</NavLink>
</li>
<li class="nav-item">
<NavLink className="nav-link" activeClassName="active" to="/page">Page</NavLink>
</li>
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)