概述
看完本文后你能了解到：
（1）Router和route的关系
（2）如何通过js和标签控制路由跳转和传递参数
（3）history对象push和replace的区别及其他函数的用法
（4）location对象里的变量及其获取方法
本文参考链接初探 React Router 4.0，想进一步了解的小伙伴可以移步这里。
没事多逛逛文档也是极好的
Router和Route
react-router主要是用于Url跳转，其核心概念即为Router和Route。
Router相当于一个容器，用于包裹Route，一个Route即为一个Url。Route里面会包裹一个组件。当在浏览器里输入Url时，就会跳转到相应的Route并显示相关组件。
一个Router里面可以包含多个Route的伪代码为：
<Router>
<div>
<Route />
<Route />
<Route />
</div
<Router>
这里需要包裹一个div，因为Router要求子组件只能有一个。
Router和History有三个种类型：
（1）HashHistory和HashRouter
（2）BrowerHistory和BrowerRouter
（3）createMemoryHistory和MemoryRouter
BrowerHistory和HashHistory主要区别在于Url格式：
使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis
使用browserHistory,浏览器的url是这样的：/user/liuna
这样看起来当然是browerHistory更好一些，但是它需要server端支持。
使用hashHistory时，因为有 # 的存在，浏览器不会发送request，react-router 自己根据 url 去 render 相应的模块。
【相关连接】
react router为什么推荐使用browserHistory而不推荐hashHistory？
hashHistory 和 browserHistory 的区别
标签控制和Js控制
我们在进行路由跳转时，有两种方法，第一种是通过标签来完成跳转动作，例如
{/*只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>。 */}
<Switch>
{/* 用了Switch 这里每次只匹配一个路由，所有只有一个节点。 */}
<Route/>
<Route/>
</Switch>
{/*Link 最简单的跳转，直接跳转到相应路径下并显示组件 */}
<Link to={to} {...rest} />
{/*渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址 */}
<Redirect to={to} {...rest} />
还有一种方式就是通过对象来控制路由跳转，即Js代码控制，例如
使用history对象即可完成路由跳转
History对象使用
在不同的 javascript 环境中， history 以多种能够行驶实现了对会话（session）历史的管理。
history 对象通常具有以下属性和方法：
Location对象
location对象包含了当前位置的相关信息，而且location是不会发生改变的，因此可以在生命周期的回调函数中使用location对象来查看当前页面的访问地址是否发生改变。
实例
至此为止，我们对react-router的概念进行了简单梳理，更多详细的内容可以移步本文参考文章，里面有更多详细的介绍。本文的侧重点是还是想通过demo来演示react-router的运行
本demo包含了如下的几个功能点
【1】part1调转传递参数
【2】part2 historty push和replace
【3】part3 url传值
本demo是基于react-router 4.0的，用于基本的react-router学习，
同时，可以参考React Router页面传值的三种方法，不过此版本貌似不是基于react-router4.0的，存在一些问题，在调试的时候可以把程序的this.props打印出来，在控制台里查看。
网友评论