【前-react】react-router知识点概述+小demo

概述

看完本文后你能了解到：
（1）Router和route的关系
（2）如何通过js和标签控制路由跳转和传递参数
（3）history对象push和replace的区别及其他函数的用法
（4）location对象里的变量及其获取方法

本文参考链接初探 React Router 4.0，想进一步了解的小伙伴可以移步这里。

React Router 中文文档

没事多逛逛文档也是极好的

Router和Route

react-router主要是用于Url跳转，其核心概念即为Router和Route。

Router相当于一个容器，用于包裹Route，一个Route即为一个Url。Route里面会包裹一个组件。当在浏览器里输入Url时，就会跳转到相应的Route并显示相关组件。

一个Router里面可以包含多个Route的伪代码为：

这里需要包裹一个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控制

我们在进行路由跳转时，有两种方法，第一种是通过标签来完成跳转动作，例如

   {/*只渲染出第一个与当前访问地址匹配的  或 。 */}
 
    {/* 用了Switch 这里每次只匹配一个路由，所有只有一个节点。 */}
    
    
  

    {/*Link  最简单的跳转，直接跳转到相应路径下并显示组件 */}
  

    {/*渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址 */}
  

还有一种方式就是通过对象来控制路由跳转，即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打印出来，在控制台里查看。

demo地址

https://github.com/huyifan/react-router-demo