温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

前端知识 | React-Router路由系统

发布时间:2020-08-15 18:31:30 来源:网络 阅读:1834 作者:海说软件 栏目:开发技术

                 



目前在各种web应用开发中,路由系统一直都是项目中不可或缺的部分。然而在框架不断涌现的时代,路由系统也相继而出,例如Backbone。在我们使用react框架开发web应用时,路由系统我们就免不了使用react-router。

    前端知识 | React-Router路由系统


如果你以前并没有接触过 react-router,相反只是用过刚才提到的 Backbone 的路由或者是 director,你一定会对这种声明式的写法感到惊讶。不过细想这也是情理之中,毕竟是只服务于React 类框架,引入它的特性也是无可厚非。仔细看一下,你会发现:


  • Router 与Route 一样都是 react 组件,它的 history 对象是整个路由系统的核心,它暴露了很多属性和方法在路由系统中使用;


  • Route 的path 属性表示路由组件所对应的路径,可以是绝对或相对路径,相对路径可继承;


  • Redirect 是一个重定向组件,有 from 和 to 两个属性;


  • Route 的onEnter 钩子将用于在渲染对象的组件前做拦截操作,比如验证权限;


  • 在Route 中,可以使用 component 指定单个组件,或者通过 components 指定多个组件集合;


  • param 通过 /:param 的方式传递,这种写法与 express 以及ruby on rails 保持一致,符合 RestFul 规范;


每一个路由(Route)中声明的组件(比如 SignIn)在渲染之前都会被传入一些的props,主要包括:


  • history 对象,它提供了很多有用的方法可以在路由系统中使用,比如刚刚用到的history.replaceState,用于替换当前的 URL,并且会将被替换的 URL 在浏览器历史中删除。函数的第一个参数是 state 对象,第二个是路径;


  • location 对象,它可以简单的认为是 URL 的对象形式表示,这里要提的是 location.state,这里 state 的含义与 HTML5 history.pushState API 中的 state 对象一样。每个 URL 都会对应一个 state 对象,你可以在对象里存储数据,但这个数据却不会出现在 URL 中。实际上,数据被存在了sessionStorage 中;


事实上,刚才提到的两个对象同时存在于路由组件的 context 中,你还可以通过 React 的 context API 在组件的子级组件中获取到这两个对象。

 前端知识 | React-Router路由系统

PS:本文所讲解的react-router是2.x ~ 3.x版本,如目前最新的4.x版本不兼容,但是由于目前官方是在同时维护几个版本,所以在实际项目中还是可以用的。






   



向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI