ReactJS - Scrollspy doesn't work correctly on page change


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} />

And finally my main container(Main.js) :

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

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

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" 

1-2)case 2 : when scrolling down
<nav id="mainNav" 
     className="navbar navbar-default navbar-fixed-top affix"

2)On Sign Up page : 
<nav id="mainNav" 
     className="navbar navbar-default inner-header" 

Show source
| reactjs   | caching   | twitter-bootstrap   | scrollspy   2017-01-07 17:01 0 Answers

Answers to ReactJS - Scrollspy doesn&#39;t work correctly on page change ( 0 )

Leave a reply to - ReactJS - Scrollspy doesn't work correctly on page change

◀ Go back