React路由介绍

    React的路由时根据浏览器的输入的URL来找到相对应的页面，本文主要从4个方面来讲解，一是路由安装，二是一级路由及多级路由配置，二是路由间参数传递的方法，四是浏览器历史和Hash历史配置，以及区别

1、 路由安装

    路由的安装通过yarn来安装，方法是通过yarn add来导入相对应的包

yarn add react-router-dom

2、一级路由及多级路由配置

2.1 路由依赖导入

import {HashRouter,Route,Switch} from 'react-router-dom'

    通过import 从react-router-dom中导入

2.2一级路由配置

    一级路由就是第一层嵌套的路由，路由还可以嵌套多个路由，依次类推，

    一级的路配置如下：

import Page404 from 'views/errorpage/page404';
import Index from 'views/index/index';
<HashRouter>
	<Switch>
		<Route exact path="/" component={Index} />
		<Route path="/exception/404" component={Page404} />
		<Route path="/index" component={Index} />
	</Switch>
</HashRouter>

    其中exact是严格匹配，component通过import引入的组件，Switch只能从列表的路由中选择其中一个，如果没有这个，可能路由中会出现多层嵌套的情况

render(){
	const { match }=this.props
	return(
	<HashRouter>
		<Switch>
				<Route exact path={`${match.url}/aaa`} component={AriticleList} />
				<Route exact path={`${match.url}/addariticle`} component={AddAriticle} />
		</Switch>
	</HashRouter>
)} 

    多级路由和一级路由不一样的地方是，path的路径写法不一样，多级路由需要把当前页面的URL加上，通过props对象中的math来加入

3、浏览器历史和Hash历史的区别

    浏览器历史和Hash不一样的首先是路径，浏览器历史是通过域名www.banbansmile.com/index来记录历史的访问路径，但是Hash历史就不一样，域名和路径之间多了一个#，如www.banbansmile.com/#/index来记录路径的访问，React默认的是memory历史，如果用到浏览器历史，需要配置一下，方式是再HashRouter中加入createBrowserHistory()方法。如下所示

	import {createBrowserHistory} from 'history';
	<Router history={createBrowserHistory()}>
		<Switch>
			<Route exact path={"/"} component={First} />
			<Route exact path={"/first"} component={First} />
		</Switch>
	</Router>

详细的介绍使用在这篇文章中有非常详细的讲解：https://www.cnblogs.com/nangezi/p/11490778.html

    内存、Hash历史和浏览器历史不一样的是，在跳转页面的时候，内存历史页面不会全部更新，但是浏览器历史却每次请求，页面都会全部更新，我本打算把这个博客更改成浏览器历史，但是感觉用户的体验不好，所以就没有更换