1.下载 npm install --save react-router-dom

router-router 只提供了一些核心的API
react-router-dom 更多的一些api
路由根据url的不同来切换对应组件 实现spa（单页面应用） 在页面切换的时候不会刷新更加接近原生体验

2.路由模式
hash HashRouter(hash模式，带#号，刷新的时候页面不丢失)
browser BrowserRouter（历史记录模式，不带#号，通过历史记录api来进行路由切换的，刷新会丢失，本地模式不会）

3.index.js中引用路由模块

import { HashRouter, BrowserRouter } from 'react-router-dom'
ReactDOM.render(<HashRouter><App /></HashRouter>,document.getElementById('root'));

3.路由模式包裹根组件
ReactDom.render(，document.getElement(‘root’));

4.引用import {Route} from 'react-router-dom’

import {Route,NavLink, Router} from  'react-router-dom'

5.配置 Router

6.路由导航 link to=“去哪里” NavLink可以动态的给选中的导航添加active的类名

import {Route,NavLink, Router} from  'react-router-dom'
 <NavLink to="/home/homea">homea</NavLink>
<NavLink to="/home/homeb">homeb</NavLink>
 <Route path="/home/homea" component={HomeA}/>
<Route path="/home/homeb" component={HomeB}/>

7.路由进阶

1.withRouter 高阶组件
（HOC参数是一个组件，同时返回的也是一个组件,这类组件我们称之为高阶组件）就是让不是路由切换的组件也具有路由切换的三个属性（location match history）
监控路由变化history.listen(link)=>{
ink.pathname 切换路径
}

2.编程式导航
props.history.push("/xxxx")
路由传参

3.params
进行传参1.需要在路由规则中设置传递的接受参数
发送参数 直接在跳转路径后进行编写
接受 props.match.params.参数名
优势：刷新地址参数依然存在
缺点：只能传递字符串，并且参数比较多的时候url会变的比较丑陋

4.query
不需要在路由规则中进行传递参数的配置，直接发送数据，使用 this.props.location.query.xxx