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