Question

我是React的新手，我正在研究Pluralsight的课程。该课程让我们实施一条简单的路线。

{
    u'dataFrame': 'AB3hqqqpVVVOAAA=', 
    u'decrypted': true, 
    u'fcnt': 3, 
    u'id': 1480528200533, 
    u'port': 5, 
    u'rssi': -116, 
    u'sf_used': 10, 
    u'snr': -8.5, 
    u'timestamp': '2016-11-30T17:50:00.533Z'
}

因此，当我启动应用程序时，主页会显示应有的内容。但是，如果我转到地址栏并输入http://localhost:3456/#about，则浏览器窗口不会刷新。我必须手动刷新浏览器才能看到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);    
  } 
}

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

1 个答案: