【前-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

你可能感兴趣的:(【前-react】react-router知识点概述+小demo)