React路由封装如何实现
导读:本文共2214字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:接下来,请跟着小编一起来学习吧!了解SAP和路由的概念SAP(single page web application)的意思是单页Web应用,正如前言所说,一般来说功能较为复杂都会涉及到页面跳转的功能,而传统的前端页面跳转往往是利用<a/>标签进行跳转,这种方式虽然可以实现功能,但是每次跳转到新的页面都会重新对页面的元素进行加载,这样其实对于用户来说是不太友好的。而单页Web应用则较好... ...
目录
(为您整理了一些要点),点击可以直达。接下来,请跟着小编一起来学习吧!
SAP(single page web application)的意思是单页Web应用,正如前言所说,一般来说功能较为复杂都会涉及到页面跳转的功能,而传统的前端页面跳转往往是利用<a/>标签进行跳转,这种方式虽然可以实现功能,但是每次跳转到新的页面都会重新对页面的元素进行加载,这样其实对于用户来说是不太友好的。而单页Web应用则较好的解决了这个问题,因为SAP整个应用都是在一个页面上进行的,每次的页面跳转只涉及到页面中对应组件(模块)的更新操作,这样就在一定程度上让页面不需要加载重复的页面元素。
路由其实可以理解为是一个映射关系,即路径到组件或者函数的对应关系,比如说/home这个路径对应着Home这个首页组件,在React中,有react-router-dom这个官方维护的组件库来帮助我们处理项目中的路由问题,需要注意的是,我们用create-react-dom创建的react项目,默认是没有react-router-dom的,所以需要我们自己再额外下载到项目中。
封装路由的文件组件 ,针对一级路由的封装操作,单独路由文件抽离出单独的文件中去
src中新建一个router文件夹,在文件夹新建index.js文件,路由配置文件迁移过去
router文件夹中新建mapRouter文件,路由配置转换成数组对象格式,参考Vue配置
index.js循环Route组件即可,二级路由配置先暂时在父组件中配置即可
注:文件夹的名称和文件的名字可以随便定义,无需完全按照上方流程来
index.js
router/index.js
HashRouter as Router,这是给HashRouter起的别名,可以不写
router/mapRoute.js路由配置文件
这样我们react中的路由就封装好了,他的原理是跟我们vue中的路由一样,把路由封装到一个文件中,然后我们就可以直接在这个里面添加路由,不同的是,vue中有一个children属性用来定义二级路由,而react中没有。我们在这个js文件中引入路由,然后在index文件中进行循环渲染,同时也减少了我们的代码量。不过需要注意的是,我们在react路由封装中不能使用二级路由,这是一个弊端,我们可以将二级路由定义在父组件中定义。
React路由封装如何实现的详细内容,希望对您有所帮助,信息来源于网络。