React.JSハッシュルートに移動しても表示が更新されない

Question

私はReactを初めて利用しています。私はPluralsightのコースを進めています。コースでは私たちに単純なルートを実装させています。

var App = React.createClass({ 
    render: function() { 
     var Child; 

     switch (this.props.route) { 
      case 'about': 
       Child = About; 
       break; 
      default: 
       Child = Home; 
       break; 
     } 

     return ( 
      <div> 
       <Child /> 
      </div> 
     ); 
    } 
}); 

function render(){ 
    var route = window.location.hash.substr(1); 
    ReactDOM.render(<App route={route} /> , document.getElementById('app')); 
} 

window.addEventListener('hashChange', render); 
render(); 

私がアプリを起動すると、ホームページが表示されるようになります。しかし、アドレスバーにアクセスしてhttp://localhost:3456/#aboutと入力すると、ブラウザウィンドウが更新されません。私は約ページを見るために手動でブラウザをリフレッシュする必要があります。しかし、私が戻って "#about"を削除すると、ホームページが正しく表示されます。

私はWindows 10を使用しています。私はChromeとMicrosoft Edgeの両方でこれを試しました。

何が問題なのでしょうか？

Answer 1

hashchangeはキャメルケースではなく、イベントがブラウザ

使用この機能を、それがブラウザ

function handleHashChange(callback) { 
    if (!('onhashchange' in window)) { 
    var oldHref = location.href; 
    setInterval(function() { 
     var newHref = location.href; 

     if (oldHref !== newHref) { 
     var _oldHref = oldHref; 
     oldHref = newHref; 
     callback.call(window, { 
      'type': 'hashchange', 
      'newURL': newHref, 
      'oldURL': _oldHref 
     }); 
     } 
    }, 100); 
    } else if (window.addEventListener) { 
    window.addEventListener("hashchange", callback, false); 
    } else if (window.attachEvent) { 
    window.attachEvent("onhashchange", callback);  
    } 
}