react--路由

1、路由的安装
cnpm install react-router-dom -S

2、路由的方式
HashRouter: 带hash值的router vue hash
BrowserRouter: 不带hash值的router vue history

注意：
1、路由的配置项必须在HashRouter、BrowserRouter内部做配置
2、HashRouter、BrowserRouter内部只能拥有一个子元素

3、路由配置项常用的组件

4、Route
作用:当路径匹配成功以后，渲染相对应的组件

属性：
path: 组件所对应的路径
component:需要渲染的组件 (组件渲染的方式)
render:需要渲染的组件 (组件渲染的方式)
exact:路径完全匹配

5、路由跳转的方式
1、link
2、NavLink

属性：
activeStyle
activeClassName

6、路由嵌套

7、路由渲染的方式
render:组件标签形式
1、不仅可以渲染组件 而且还可以渲染标签
2、 可以进行组件传值 以及逻辑判断
3、render渲染的组件默认是没有history location match 这三个属性的 如果需要使用 必须经过传递给组件
component:组价名称
1、只能渲染组件
2、凡是通过component进行组件渲染的 当前组件的props 中就有多三个属性（history location match）

8、路由传参

1、动态路由
在定义路由的时候，定义传递参数的key值 <Route path="/detail/:id/:name" component={Detail} />
在路由跳转的时候 传递需要传递的值 <h2 key={index}><Link to={item.path+"/"+item.goodsId+"/"+item.goodsName}>{item.goodsName}</Link></h2>

接收的时候通过this.props.match.params进行接收

2、query传值
1、根据query传值的方式进行路径的拼接 需要node中url模块的解析

2、根据对象的形式进行传值 to={{pathname:"路径"，query:{需要传递的值}}}

9、编程式导航
this.props.history.goBack()
this.props.history.goForward()
this.props.history.push()
this.props.history.replace()

10、withRouter
1、当前组件如果内部的this.props中没有history location match的时候可以通过withRouter进行包裹组件
然后进行导出组件 这样当前组件就会有路由的这几个属性
import {withRouter} from "react-router-dom"
........
export default withRoute(组件名称)

11、Switch
被Switch包裹的路由组件 在匹配的时候只会匹配一个

12、Redirect
重定向
from：从哪里来
to:到哪里去