react-router 总结

一、前言

react-router在网上找了很多资料和demo，才发现旧的一些demo根本运行不了，后来找到原因说是因为版本更新，新的版本与旧的版本差别很大，所以我这边做了这一期最新版本的组件的一些介绍。

另外这里只介绍 react-router-dom ,react-router-native暂不提及，当前react-router-dom的版本为5.0.1，react-router的版本也是5.0.1。

一、基本理解

1. react-router是针对react的一个插件库
2. 其专门用来实现一个 SPA 应用（单页Web应用：single page web application）
3. 基于 react 的项目基本都会用到此库
4. react-router 实现了路由的核心功能
5. react-router-dom 适用于PC端，加入了浏览器运行环境下的一些功能，依赖于react-router
6. react-router-native 适用于手机端，加入了react-native运行环境下的一些功能，依赖于react-router

二、react-router-dom 对应组件介绍
        react-router-dom源码 esm文件夹里的react-router-dom.js 里导出组件

export * from 'react-router’;//这里导出react-router里的所有内容
export { BrowserRouter, HashRouter, Link, NavLink };

在 react-router 源码中 esm文件夹里的react-router.js里导出组件。

export { MemoryRouter, Prompt, Redirect, Route, Router, 
StaticRouter, Switch, generatePath, matchPath, 
withRouter, context as __RouterContext };

下面根据导出的这些组件进行介绍。

三、BrowserRouter、HashRouter，MemoryRouter，NativeRouter，StaticRouter，Router

 用来包含路由的父组件，Link和Route等都必须在它们内才能使用

1. <BrowserRouter>：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；
2. <HashRouter>：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；
3. <MemoryRouter>：能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写)，