路由复习

spa:single page application 单页面应用
提供一个舞台。舞台当中呈现的是组件，具体呈现的组件由地址决定。
react路由:根据路径决定要使用哪一个组件
组件：
路由组件：由路由控制
普通组件：页面当中使用的组件

1，下载路由模块
cnpm install react-router-dom -S
2，引入
import {
BrowserRouter as Router,//路由器
Route//路由，必须被Router包裹
NavLink,
Link,
Switch,
HashRouter,
witchRouter
}from “react-router-dom”

witchRouter
witchRouter:是一个高阶组件，作用是让指定的组件获得路由相关属性
export default witchRouter（Four）

Route
path:指定地址，当输入的地址与指定的地址相同，则以为匹配上了，可以使用相对应的组件，当省略该地址时，会认为所有的路径都可以匹配的上。与path={}作用相同。
component:指定对应的组件。
exact:是一个布尔值，用于决定是否精确匹配。
Link
作用产生跳转，不会拥有选中样式(activeClassName不起作用)
to:指定跳转
Redirect
from :当路由与from 相同时，会跳转至地址to
to：指定要跳转的地址。
Switch
作用：将路由Route直接进行包裹（中间不要出现其它无关组件）
会至上而下进行地址的匹配，如果找到匹配的路由不会继续向下查找。
NavLink
to:指定跳转的地址
className:指定样式
activeClassName:指定选中以后的样式，默认active
Router
history与hash
BrowserRouter与HashRouter
basename:为地址统一添加前缀
forceRefresh:强制刷新，每次请求都会重新抓取数据。
关于页面***
路径决定使用哪一个组件（页面（路由组件）），一般放置在 pages或views或html
在pages三个组件：
Home.jsx:----> /home
Search.jsx—>/search
My.jsx------->/my
query************
如何传：

如何接收：
this.props.location.query.a
this.props.location.query.b
this.props.location.query.c
this.props.location.query.d
特点：刷新数据会丢失。可以传递对象。
state*********
如何传：
<Link to={{pathname:"/two",state:{a:1,b:2,c:{d:4}}}}>跳转至Two
如何接收：
console.log(this.props.location.state);
params************
如何传：
1、route:
<Route path={"/three/:id/:type"} component={Three}>
2、link
<NavLink to={"/three/1/{a:1,b:2}"}>Three
接收：
this.props.match.params.id
this.props.match.params.type

---

子路由（二级路由。）路由嵌入路由。
首页 商品 收藏 我的
我的商品 我的收藏
编程式导航：通过代码逻辑让路由进行相对应的跳转。
this.props.history.push("/");// 跳转至/
this.props.history.push({pathname:"/"});// 可以传递对象
this.props.history.goBack();返回到上一个页面
this.props.history.go(-2);// 返回上二个页面
this.props.history.goForward();
this.props.history.replace("/goods"):跳转，但不会产生记录。
1、当前所在的组件是一个路由组件,否则是没有this.props.history的。
***********
如果要让普通组件，拥有路由组件相关的属性，有两种方法
1、通过属性传值。
<Four {…this.props}>
2、通过高阶组件withRouter .
高阶组件：高阶组件是一个函数。该函数接收一个组件，返回一个组件。
在four.jsx
export default withRouter(Four);