[react] React-Router的实现原理是什么？

[haizhilin2013]

[react] React-Router的实现原理是什么？

[sin7777]

依赖 history 库，保证视图和 URL 的同步

用户可以通过手动输入或者与页面进行交互来改变 URL，然后向服务端发送请求获取资源，成功后重新绘制 UI。

[NieShiyi]

1.react-router依赖基础 - history，是一个独立的第三方js库，可以用来兼容在不同浏览器、不同环境下对历史记录的管理，拥有统一的API。具体来说里面的history分为三类:

• HashRouter：老浏览器的history,主要通过hash来实现，对应createHashHistory()
• BrowserRouter：高版本浏览器,通过html5里面的history，对应createBrowserHistory()
• MemeoryRouter：node环境下,主要存储在memeory里面，对应createMemoryHistory()

*createHashHistory、createBrowserHistory、createMemoryHistory方法只是覆盖了某些基础公用方法，比如go(),replace(),push()等。BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用 hash 和 hashchange 事件构建路由。MemeoryRouter可以应用于像react native。

2. 当url发生变化时，路由通过监听url的变化，我们不仅能直接获取和解析url路径，并且通过路由匹配，决定应该展示什么样的组件，即React组件的展示，授权路由进行控制，保证了url和视图的同步。

[postbird]

两部分来说： 客户端路由实现的思想：

• 基于 hash 的路由：通过监听 hashchange 事件，感知 hash 的变化
  • 改变 hash 可以直接通过 location.hash=xxx
• 基于 H5 history 路由：
  • 改变 url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API
  • 监听 url 的变化可以通过自定义事件触发实现

    var _wr = function(type) {
    var orig = history[type];
    return function() {
    var rv = orig.apply(this, arguments);
    var e = new Event(type);
    e.arguments = arguments;
    window.dispatchEvent(e);
    return rv;
    };
    };
    history.pushState = _wr('pushState');
    history.replaceState = _wr('replaceState');

    上面代码在调用 pushState 的时候回同步 dispatch 一个 pushState 事件，可以监听感知

react-router 实现的思想：

• 基于 history 库来实现上述不同的客户端路由实现思想，并且能够保存历史记录等，磨平浏览器差异，上层无感知
• 通过维护的列表，在每次 URL 发生变化的回收，通过配置的 路由路径，匹配到对应的 Component，并且 render