React：Router

路由基本使用

1、明确好界面中的导航区、展示区
2、导航区的a标签改为Link标签
	import {Link} from 'react-router-dom';
	<Link to="/xxx"></Link>
3、展示区写Route标签进行路径的匹配
	<Route path="/xxx" component={Demo}/>
4、<App> 的最外侧包裹一个 <BrowserRouter> 或 <HashRouter>

路由组件与一般组件

1、写法不同：
	一般组件：<Demo />
	路由组件：<Route path="/demo" component={Demo} />
2、存放位置不同：
	一般组件：component
	路由组件：pages
3、接收到的 props 不同：
	一般组件：写组件标签时传递了什么，就能收到什么
	路由组件：接收到三个固定的属性
		history:
			go: f go(n)
			goBack: f goBack()
			goForward: f goForward()
			push: f push(path, state)
			replace: f replace(path, state)
		location:
			pathname: "/about"
			search: ""
			state: undefined
		match: 
			params: {}
			path: "/about"
			url: "/about"

路由传递数据

1. params 参数
	路由链接（携带参数）：<Link to="/demo/test/tom/18"></Link>
	注册路由（声明接收）：<Route path="/demo/test/:name/:age" component={Test} />
	接收参数：const {name, age} = this.props.match.params

2. search 参数
	路由链接（携带参数）：<Link to="/demo/test/?name=tom&age=18"></Link>
	注册路由（无需声明，正常注册即可）：<Route path="/demo/test" component={Test} />
	接收参数：this.props.location.search
	备注：获取到的 search 是 urlencoded 编码字符串，需要借用querystring解析 
	import qs from "querystring"; 
	qs.parse(this.props.location.search.slice(1));
	
3. state 参数
	路由链接（携带参数）：<Link to={{path:"/demo/test", state:{name: 'tom', age: 18}}}></Link>
	注册路由（无需声明，正常注册即可）：<Route path="/demo/test" component={Test} />
	接收参数：this.props.location.state
	备注：刷新也可以保留住参数 

一般组件使用 路由组件功能

/**
* withRouter 处理后的一般组件 会加上 路由组件特有的API（history、location等）
**/

import {Component} from "react";
import {withRouter} from "react-router-dom";

class Demo extends Component{
	...
}

export default withRouter(Demo);

BrowserRouter 和 HashRouter 之前的区别

1. 底层原理不一样
	BrowserRouter 使用的是 H5 的 History API，不支持IE9及以下版本；
	HashRouter 使用的是 URL 的哈希值；
2. path表现形式不一样
	BrowserRouter 的url路径中不含 #，如：localhost:3000/demo/test;
	HashRouter 的路径中包含 #，如：localhost:3000/#/demo/test;
3. 刷新后对 state参数的影响
	BrowserRouter 没有任何影响，因为state是存储在 history 对象中；
	HashRouter 刷新后会导致路由state参数的丢失；
4. 备注 HashRouter 可以用于解决一些路径错误相关的问题。