react路由简述之历史纪录模式

	在简述react路由之前首先需要说的就是理由主要分为两类:前端路由和后端路由,其功能用法也不同.
	       1.  **前端路由**:其主要功能是根据不同的URL路径去切换不同的组件.
	       2.  **后端路由**:其主要功能是根据用户不同的请求返还不同的内容.
	而react中所使用的就是前端路由,下面我就根据自身对react路由功能的了解进行一些简述:
	首先要提到的是react路由的两种模式: 历史纪录模式	(BrowserRouter) 和 hash模式 (HashRouter) ,因为本人在日常的使用中主要使用的就是历史记录模式,所以今天写的内容也主要针对历史记录模式所写.



	(1) 路由的安装和引用:
	
			安装命令:  npm install react-router-dom  或  yarn  add  react-router-dom;
			引用:   首先需要引入历史记录模式的路由器组件     import {BrowserRouter as Router} from 'react-router-dom'	



	(2) 路由组件之路由器组件
					
					Router即为路由器,一般添加在项目的最外层,该组件主要拥有以下两个属性:
					1.  basename: 为路由增加前缀
					2.  forceRefresh: 每次更新地址即要重新向服务器发送一次请求。强制刷新,对HashRouter不起作用。

				import {BrowserRouter as Router} from 'react-router-dom'	  //引入
					<Router>根组件</Router>

    (3) 路由组件之路由组件:

					Route为路由组件:其主要功能是配置路由,决定所要渲染的组件,该组件主要有四个属性:
					1.  component:  指定渲染的组件 
					2.  render:    指定要呈现的内容，该属性的值是一个函数根据返回值决定渲染的内容.  
					3.  exact：是否要精确匹配,当不设置该值时path的只要匹配到开始的部分就会进行渲染,而不是进行全部匹配,类似于正则中的贪婪模式.
					4.  path: 指定地址,不区分大小写

					import {Route} from 'react-router-dom'   //引入
					<Route path={"/"} exact component={Home}></Route>
					<Route path={"/order"} render={() => <div>组件</div>}></Route>

	 (4) 路由组件之导航组件 NavLink 和 Link:

					NavLink 为导航组件: 其主要功能为设置组件的导航链接,该组件主要有四个属性:
					1.  to:指定跳转的地址 ,有两种格式   字符串    to={"/my"}    对象     to={{ pathname:"/my"  }}
					2.  exact：是否要精确匹配
					3.  activeClassName :  指定导航选中后的class名
					4.  activeStyle : 指定导航选中后的style样式
			而 Link组件 与 NavLink:Link组件的区别就是不包含exact,activeClassName,activeStyle属性,其他属性相同

 			import {NavLink,Link} from 'react-router-dom'     //引入
		 	<NavLink className={"App-link"} exact activeStyle={{color: "red"}} to={"/"}>组件名</NavLink>
		 	<Link  exact  to={"/"}>组件名</Link>

	(5) 路由组件之重定向组件:

					Redirect为重定向组件:其主要功能为利用重定向设置权限路由,当条件符合时使其重定向到另一个路由,其主要功能有两个:
						1. to: 重定向指向的位置（地址）   
						2. from：满足重定向条件的地址

			import {Redirect} from 'react-router-dom'     //引入
    		<Redirect to={"/my"} from={"/profile"}></Redirect>

	 (6) 路由组件之Switch组件:

					Switch组件是一个容器组件,作用是在多个组件同时匹配时只渲染第一个

 			import {Switch} from 'react-router-dom'   //引入
			 <Switch>
                <Route path={"/"} exact component={Home}></Route>
                <Route path={"/my"} component={My}></Route>
                <Redirect to={"/my"} from={"/profile"}></Redirect>
                <Route path={"*"} component={()=><div>404，您找的页面不存在2</div>}></Route>
            </Switch>

	(7)  路由组件之高阶组件withRouter

					withRouter是一个高阶组件(HOC),其本质是一个函数，该函数接收一个组件，返回一个组件。实现的主要功能是属性代理,负责给参数组件增加 history,location,match等三个属性后返回。因为在react中不是通过路由直接跳转的组件是没有这三属性的,在没有这个属性时也就无法通过路由进行传值.该高阶组件主要解决这个问题.

 			import {withRouter} from 'react-router-dom'  //引入
			 export default withRouter(JoinCarBtn);  //使用

	(8)  路由切换组件增加的三个属性
					1.  history属性     该属性主要有以下几个方法
					           					history.push(路径)      主要用于实现编程式导航
			 			 						history. Listen             主要用于检测监控路由的变化   	

	 			this.propos.history.listen((location)=>{  
	 						locatin.pathname //会根据路由的变化而变化
	 						})

			  							history.go(-1)         主要用于访问路由的历史记录
				2.  location属性    该属性主要有以下几个值
										location.pathname    当前路径
										location.search         获取查询字符串     ?a=xxx&b=yyy 
										location.state            接收路由传递的多个值
										location.query			 接收路由传递的多个值
				3.  match属性      该属性主要有以下几个值
									    match.params          用于获取路由的参数


	(9)  路由传参:
					主要有以下三种方法:
					1.  query传值:      

			<NavLink to={{pathname:"/one",query:{a:1,b:{c:3}}}}>组件名</NavLink>

									接收方式:    this.props.location.query
					                传值特点:    可以接受对象,但是刷新后数据不存在
						2.   state传值:     

			<NavLink to={{pathname:"/two",state:{a:10,b:{c:30}}}}>组件名</NavLink>

									接收方式:    this.props.location.state      state 默认值是undefined
 									传值特点:    可以接受对象,但是刷新数据后不会丢失,但是重新时打开会丢失
						3.  param传值:   

				<NavLink to={{pathname:"/three/1/2"}}>组件名</NavLink>   //导航传值
				<Route path={"/Three/:id/:type"} component={One}></Route>   //路由进行定义变量名

									接收方式:    this.props.location.match.params   params 默认值  {}
 									传值特点:    会更改路由地址,但刷新数据不会丢失,

			**以上所述均为个人见解,如有错误敬请指出,谢谢**