1、安装路由
npm install react-router-dom -S
2、路由的方式，都是组件
HashRouter: 带hash值的router //相当于vue hash
HashRouter 可以用别名
需要这样写: HashRouter as Router
BrowserRouter: 不带hash值的router //相当于vue history
Route 组件渲染的一种方式
Switch
Redirect 路由重定向
注意：
- 1、路由的配置项必须在HashRouter、BrowserRouter内部做配置
- 2、HashRouter、BrowserRouter内部只能拥有一个子元素
3、路由配置项常用的组件
import React, { Component } from "react"
import { HashRouter as Router, BrowserRouter, Link, NavLink, Route} from "react-router-dom"
import Home from "./components/home"
import Movie from "./components/movie"
import Sort from "./components/sort"
import Mine from "./components/mine"
import HomeMovie from "./components/homeMovie"
export default class App extends Component{
render () {
return (
<Router>
<div>
//componet 渲染方式
<Route path="/home" component={Home}/>
<Route path="/movie" component={Movie}/>
<Route path="/home/movie" component={HomeMovie}/>
<Route path="/sort" component={Sort}/>
<Route path="/mine" component={Mine} />
//render 渲染方式
<Route path="/home" exact renader={() => {
return <Home/>
}} />
<Route path="/movie" renader={() => {
return <HomeMovie />
}} />
<Route path="/home/movie" renader= {() => {
return <Movie />
}} />
<Route path="/sort" renader={() => {
return <Sort />
}} />
<Route path="/mine" renader={() => {
return <Mine />
}} />
<div>
<ul>
<li><NavLink to="/home">
<span>首页</span>
</NavLink></li>
<li><NavLink to="/movie">
<span>电影</span>
</NavLink></li>
<li><NavLink to="/sort">
<span>分类</span>
</NavLink></li>
<li><NavLink to="/mine">
<span>我的</span>
</NavLink></li>
</ul>
</div>
</div>
</Router>
)
}
}
4、Route
作用：当路径匹配成功以后，渲染相对应的组件
属性：
- path: 组件所对应的路径
- component:需要渲染的组件 (组件渲染的方式)
- render:需要渲染的组件 (组件渲染的方式)
- exact:路径完全匹配 一般为false 父级在子页面不显示
5、路由跳转的方式
1、Link 路由跳转的方式
2、NavLink 路由跳转的方式(带当前位置名)
属性：
用的很少
activeStyle
//写行内样式 <NavLink to="/home" activeStyle={{color:"red"}}/>
activeClassName
//写class样式 <NavLink to="/home" activeClassName="NavLink-active"/>
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:到哪里去
