我试图通过使用react activeClassName属性来设置我的导航样式.到目前为止,它按预期工作,但有一个问题 – 我的第一个导航链接指向根路径(/).因此,即使在另一个URL上,它也会将该URL(例如/技能)和root注册为活动(因此2个菜单项的样式).
有一个简单的解决方法吗？我应该将Root路由定义为其他东西(例如/ 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;
routes.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>
);
因此,为了澄清,我希望我的家乡路线在另一条路线上不活跃.
我究竟做错了什么？
谢谢
解决方法
您可以使用
<IndexLink>或仅为其子路径处于活动状态时不突出显示的链接设置onlyActiveOnIndex prop：
<li className="headerNavLink"><IndexLink to="/" activeClassName="activeLink">introduction</IndexLink></li>
要么
<li className="headerNavLink"><Link to="/" activeClassName="activeLink" onlyActiveOnIndex>introduction</Link></li>
