Miha Šušteršič Miha Šušteršič - 3 months ago 23
Javascript Question

react-router index route always active

I am trying to style my navigation by using the react

activeClassName
attribute. So far it works as expected, but there is a problem - my first nav links points to the root route(/). So even when on another URL it will register that URL (for example /skills) and root as active (so 2 menu items get styled).

Is there an easy workaround for this? Should I just define the Root route as something else (for example /home)?

My header:

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>
);


So to clarify, I would like my home route to not be active when on another route.

What am I doing wrong?

Thanks

Answer

You can use <IndexLink> or set onlyActiveOnIndex prop for links that are not to be highlighted when their children paths are active:

<li className="headerNavLink"><IndexLink to="/" activeClassName="activeLink">introduction</IndexLink></li>

or

<li className="headerNavLink"><Link to="/" activeClassName="activeLink" onlyActiveOnIndex>introduction</Link></li>