Use NavLink en lugar de Link. No está documentado, pero funciona como esperas. https://github.com/ReactTraining/react-router/issues/4318

ACTUALIZACIÓN 17.05.2017:

https://reacttraining.com/react-router/web/api/NavLink

Puedes hacerlo con NavLink en react-router v4

 <div id="tags-container"> {tags.map(t => <NavLink className="tags" activeStyle={{ color: 'red' }} to={t.path} > {t.title} </NavLink> )} </div>

Si tiene un problema en el que su menú de navegación funciona, excepto que no se actualiza correctamente cuando hace clic en los enlaces y la ruta cambia, pero funciona bien si presiona F5, puede hacer esto:

Esto probablemente ocurre porque está utilizando Redux, que tiene un método de ciclo de vida shouldComponentUpdate en su función de connect . Probablemente tenga su componente de navegación envuelto en connect . Todo esto está bien. shouldComponentUpdate es lo que está arruinando tu vida.

Para solucionarlo, simplemente lleve el enrutador a su función mapStateToProps :

 // This lets shouldComponentUpdate know that the route changed, // which allows the Nav to re-render properly when the route changes, woot! const mapStateToProps = (state) => { return { router: state.router, } } // or, if you prefer pro style destructure shorthand: const mapStateToProps = ({ router }) => ({ router })

Si no está seguro de dónde proviene state.router , proviene del archivo en el que combina sus reductores y verá algo como esto:

 import { combineReducers } from 'redux' import { routerReducer } from 'react-router-redux' import authReducer from './components/auth/auth_reducer' export default combineReducers({ router: routerReducer, auth: authReducer, })

Aquí hay algo de HTML y CSS para un bonito enlace de navegación:

HTML

 <ul id="Nav_menu"> <li> <NavLink to="/home" className="Nav_link" activeClassName="activeRoute" activeStyle={{ color: 'teal' }} > HOME </NavLink> </li> <li> <NavLink to="/products" className="Nav_link" activeClassName="activeRoute" activeStyle={{ color: 'teal' }} > PRODUCTS </NavLink> </li> </ul>

NOTA: Si está vinculando a "/" , coloque el accesorio exact en NavLink.

CSS

 #Nav_menu { display: flex; flex-direction: row; width: 100%; height: 100%; list-style-type: none; margin: 0; padding: 0; } .Nav_link:link { color: #fff; font-size: 1.6rem; line-height: 1.6rem; text-decoration: none; } .Nav_link:visited { color: #fff; } .Nav_link:hover { color: yellow; } .Nav_link:active { color: teal; } .activeRoute { background-color: yellow; border-bottom: 0.4rem solid teal; cursor: not-allowed; }

Observe activeStyle en el marcado HTML. Esta era la única forma en que podía cambiar el color del texto en la ruta/enlace activo. No funcionó cuando puse color: teal; en la clase CSS activeRoute . Abra esto en otra pestaña: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md

Si no sabes por qué usé rem en lugar de px . Esta es una gran oportunidad para investigar la accesibilidad web y font-size: 10px; .

Mantente en forma y diviértete.