react项目的可用的路由库是react-router,当然这也是官方支持的。它也分为：
-router 核心组件
react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）
react-router-native 应用于native端的路由
以下教程我们都以web端为主，所以所有的教程内容都是默认关于
react-router-dom的介绍。
进行网站（将会运行在浏览器环境中）构建，我们应当安装react-router-dom。react-router-dom暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可。
installation | 安装
安装：
yarn add react-router-dom
# 或者，不使用 yarn
npm install react-router-dom
路由的基本概念
现在的react router版本中已不需要路由配置，现在一切皆组件。
reactrouter中提供了以下三大组件：
router是所有路由组件共用的底层接口组件，它是路由规则制定的最外层的容器。
route路由规则匹配，并显示当前的规则对应的组件。
link路由跳转的组件
当然每个组件下又会有几种不同的子类组件实现。比如： router组件就针对不同功能和平台对应用：
三大组件使用的关系：
image
如果说我们的应用程序是一座小城的话，那么route就是一座座带有门牌号的建筑物，而link就代表了到某个建筑物的路线。有了路线和目的地，那么就缺一位老司机了，没错router就是这个老司机。
第一个demo
现在你可以复制任意的示例代码，并粘贴到 src/app.js。如下：
import react, { component } from 'react';
import { hashrouter as router, link, route } from 'react-router-dom';
import './app.css';
const home = () => (
home
)
const about = () => (
about
)
const product = () => (
product
)
class app extends component {
render() {
return (
home
about
product
);
}
}
export default app;
router组件
browserrouter组件
browserrouter主要使用在浏览器中，也就是web应用中。它利用html5 的history api来同步url和ui的变化。当我们点击了程序中的一个链接之后,browserrouter就会找出与这个url匹配的route，并将他们对应的组件渲染出来。 browserrouter是用来管理我们的组件的，那么它当然要被放在最顶级的位置，而我们的应用程序的组件就作为它的一个子组件而存在。
import * as react from 'react';
import * as reactdom from 'react-dom';
import { browserrouter } from 'react-router-dom';
reactdom.render(
document.body);
browserrouter组件提供了四个属性。
basename: 字符串类型，路由器的默认根路径
forcerefresh: 布尔类型，在导航的过程中整个页面是否刷新
getuserconfirmation: 函数类型，当导航需要确认时执行的函数。默认是：window.confirm
keylength: 数字类型location.key 的长度。默认是 6
basename 属性
当前位置的基准 url。如果你的页面部署在服务器的二级（子）目录，你需要将 basename 设置到此子目录。正确的 url 格式是前面有一个前导斜杠，但不能有尾部斜杠。
例如：有时候我们的应用只是整个系统中的一个模块，应用中的url总是以 http://localhost/admin/ 开头。这种情况下我们总不能每次定义link和route的时候都带上admin吧？react-router已经考虑到了这种情况，所以为我们提供了一个basename属性。为browserrouter设置了basename之后，link中就可以省略掉admin了，而最后渲染出来的url又会自动带上admin。
...
// 被渲染为 