React中的路由系统
成都创新互联主要从事网站设计制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务永清,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面。前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL。本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL。
react-router的最新版本是v4.1.1,由于4.0版本和之间的版本API变化较大,所以本篇文章的内容并不能应用到之前的版本中。
要注意 react-router 有 react-router-dom 和 react-router-native 的区别。前者是用于开发WEB应用的,而后者适用于移动APP的,本文所介绍的是react-router-dom。
react-router 中的三大组件
react-router中的组件就是react中的组件,只不过它们被添加了一些特殊的逻辑而已。
Router Router相当于一个容器,不会被渲染出来。你的其他组件都要放在Router中才能使用到react-router的功能。根据功能的不同,Router还分为BrowserRouter,MemoryRouter等。
pnk pnk被渲染称一个a标签,通常以声明式的方式被定义在应用程序中。
Route Route包含一个path,并指明了在path与URL匹配时要渲染的组件。
Router
如果说我们的应用程序是一座小城的话,那么Route就是一座座带有门牌号的建筑物,而pnk就代表了到某个建筑物的路线。有了路线和目的地,那么就缺一位老司机了,没错Router就是这个老司机。
先来说一说BrowserRouter。BrowserRouter主要使用在浏览器中,也就是WEB应用中(废话,看名字就知道了)。它利用HTML5 的history API来同步URL和UI的变化。当我们点击了程序中的一个链接之后,BrowserRouter就会找出与这个URL匹配的Route,并将他们渲染出来。 既然BrowserRouter是用来管理我们的组件的,那么它当然要被放在最顶级的位置,而我们的应用程序的组件就作为它的一个子组件而存在。
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render(, document.body);
有时候我们的应用只是整个系统中的一个模块,比如一个使用了ASPNET MVC中的area的后台管理模块,应用中的URL总是以 http://localhost/admin/ 开头。这种情况下我们总不能每次定义pnk和Route的时候都带上admin吧?react-router已经考虑到了这种情况,所以为我们提供了一个basename属性。为BrowserRouter设置了basename之后,pnk中就可以省略掉admin了,而最后渲染出来的URL又会自动带上admin。
... // 被渲染为 ...
对于WEB应用,BrowserRouter是我们的首选。但是这里还有一些Browser Router其他的兄弟姐妹,在其他的一些情况下你或许会用得到。
HashRouter 这个内部使用window.location.hash,由于这里存在一些问题,因此官方推荐使用BrowserRouter来替代。
MemoryRouter 主要用在ReactNative这种非浏览器的环境中,因此直接将URL的history保存在了内存中。
与pnk类似,Route也有一个exact属性,作用也是要求location与Route的path绝对匹配。
render的类型是function,Route会渲染这个function的返回值。因此它的作用就是附加一些额外的逻辑。
这里主要说下match.params.透过这个属性,我们可以拿到从location中解析出来的参数。当然,如果想要接收参数,我们的Route的path也要使用特殊的写法。
当这个组件被渲染是,location会被重写为Redirect的to指定的新location。它的一个用途是登录重定向,比如在用户点了登录并验证通过之后,将页面跳转到个人主页。
Router中常用的组件基本上都介绍了一遍,不过也只是蜻蜓点水而已。如果想更透彻的理解路由系统,建议还是去翻看官方文档并且试着去用一用。文中给出的示例也是非常精简的片段,仅仅作为参考。
以上这篇简单谈谈React中的路由系统就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持创新互联。