ReactJS - Scrollspy doesn't work correctly on page change

Question

Here is my index.js:

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

Here are my routes :

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

And finally my main container(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>
    )   
  }   
});

As you may see, NavBarComponent and FooterComponent are common for all pages. My NavBarComponent has two different styles depending if on home page or not. Here is the code I have for both cases :

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

This code is working perfectly except on url changes (when routing from a page to another). It perfectly works when opening home (myUrl/) or sign up (myUrl/signUp). But when routing from home to signUp or from signUp to home, although navbar attributes are being updated, it keeps the same behaviour. I think even if navbar attributes are updated, its behaviour is kind of cached.

FYI, here are the navbar attributes on both cases :

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="">