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，浏览器 window 不会刷新。我必须手动刷新浏览器才能看到关于页面。但是，如果我返回并删除“#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);    
  } 
}

React.JS 导航到哈希路由不会更新视图

React.JS Navigating to hash route does not update view

jsx

reactjs

react-jsx