React-Router使用笔记

在 web 应用开发中，路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时，路由系统会做出一些响应，用来保证用户界面与 URL 的同步。随着单页应用时代的到来，为之服务的前端路由系统也相继出现了。

react路由框架有很多,下面来一一解剖:react-router
源码地址:
https://www.npmjs.com/package/react-router
或者
https://github.com/ReactTraining/react-router/tree/master/packages/react-router
中文文档:http://react-guide.github.io/react-router-cn/docs/API.html

第一步:
yarn add react-router

第二部:引入类库

import { Router, Route, Switch } from "react-router";

但是当我参考其他教程来继续走的时候,我发现不一样,少了link标签,于是又看官网更新记录,已经移动到react-router-dom中去了,
react-router和react-router-dom有什么区别呢？而且还有react-router-native
 

import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';

import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';

不难发现:

react-router: 实现了路由的核心功能
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。