Aquí está mi index.js :

 var routes = require('./config/routes'); ReactDOM.render(routes, document.getElementById('app'));

Aquí están mis rutas:

 var routes = ( <Router history={hashHistory}> <Route path='/' component={Main}> <IndexRoute component={HomeComponent}/> <Route path='create' component={CreateComponent} /> </Route> </Router> );

Y finalmente mi contenedor principal ( Main.js ):

 var Main = React.createClass({ render: function () { return ( <div> <NavBarComponent onHome={onHome}/> //onHome is a boolean returning whether on home page or not {this.props.children} <FooterComponent/> </div> ) } });

Como puede ver, NavBarComponent y FooterComponent son comunes para todas las páginas. My NavBarComponent tiene dos estilos diferentes dependiendo de si está en la página de inicio o no. Aquí está el código que tengo para ambos casos:

 let className = props.onHome ? "navbar navbar-default navbar-fixed-top" : "navbar navbar-default inner-header"; let role = props.onHome ? "navigation" : ""; let dataSpy = props.onHome ? "affix" : ""; let dataOffsetTop = props.onHome ? "100" : ""; return ( <nav id="mainNav" className={className} role={role} data-spy={dataSpy} data-offset-top={dataOffsetTop}> <!-- Some NavBar code --> </nav> );

Este código funciona perfectamente, excepto en los cambios de URL (al enrutar de una página a otra). Funciona perfectamente al abrir home (myUrl/) o registrarse (myUrl/signUp). Pero cuando se enruta desde el hogar hasta el registro o desde el registro hasta el hogar, aunque los atributos de la barra de navegación se actualizan, mantiene el mismo comportamiento. Creo que incluso si se actualizan los atributos de la barra de navegación, su comportamiento se almacena en caché.

FYI, aquí están los atributos de la barra de navegación en ambos casos:

 1)On Home page : 1-1)case 1 : on top of screen <nav id="mainNav" className="navbar navbar-default navbar-fixed-top affix-top" role="navigation" data-spy="affix" data-offset-top="100"> 1-2)case 2 : when scrolling down <nav id="mainNav" className="navbar navbar-default navbar-fixed-top affix" role="navigation" data-spy="affix" data-offset-top="100"> 2)On Sign Up page : <nav id="mainNav" className="navbar navbar-default inner-header" role="" data-spy="" data-offset-top="">