# [React Router教程](https://malun666.github.io/aicoder_vip_doc/#/pages/Vip3_react_router?id=react-router%e6%95%99%e7%a8%8b)
React项目的可用的路由库是`React-Router`,当然这也是官方支持的。它也分为：
- react-router 核心组件
- react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）
- react-router-native 应用于native端的路由
>以下教程我们都以Web端为主，所以所有的教程内容都是默认关于 `react-router-dom`的介绍。
<meta charset="utf-8">
进行网站（将会运行在浏览器环境中）构建，我们应当安装`react-router-dom`。`react-router-dom`暴露出`react-router`中暴露的对象与方法，因此你只需要安装并引用`react-router-dom`即可。
官方文档地址： [https://reacttraining.com/react-router/web/guides/philosophy](https://reacttraining.com/react-router/web/guides/philosophy)
## [Installation | 安装](https://malun666.github.io/aicoder_vip_doc/#/pages/Vip3_react_router?id=installation-%e5%ae%89%e8%a3%85)
安装：
```
yarn add react-router-dom
# 或者，不使用 yarn
npm install react-router-dom
```
## [路由的基本概念](https://malun666.github.io/aicoder_vip_doc/#/pages/Vip3_react_router?id=%e8%b7%af%e7%94%b1%e7%9a%84%e5%9f%ba%e6%9c%ac%e6%a6%82%e5%bf%b5)
现在的React Router版本中已不需要路由配置，现在一切皆组件。
ReactRouter中提供了以下三大组件：
- Router是所有路由组件共用的底层接口组件，它是路由规则制定的最外层的容器。
- Route路由规则匹配，并显示当前的规则对应的组件。
- Link路由跳转的组件
当然每个组件下又会有几种不同的子类组件实现。比如： Router组件就针对不同功能和平台对应用：
`<BrowserRouter>` 浏览器的路由组件
`<HashRouter>` URL格式为Hash路由组件
`<MemoryRouter>` 内存路由组件
`<NativeRouter>` Native的路由组件
`<StaticRouter> `地址不改变的静态路由组件
三大组件使用的关系：
如果说我们的应用程序是一座小城的话，那么Route就是一座座带有门牌号的建筑物，而Link就代表了到某个建筑物的路线。有了路线和目的地，那么就缺一位老司机了，没错Router就是这个老司机。
## [第一个Demo](https://malun666.github.io/aicoder_vip_doc/#/pages/Vip3_react_router?id=%e7%ac%ac%e4%b8%80%e4%b8%aademo)
现在你可以复制任意的示例代码，并粘贴到 `src/App.js`。如下：
```
import React, { Component } from 'react';
import { HashRouter as Router, Link, Route } from 'react-router-dom';
import './App.css';
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
const Product = () => (
<div>
<h2>Product</h2>
</div>
)
class App
