React路由封装如何实现
这篇文章主要介绍“React路由封装如何实现”，在日常操作中，相信很多人在React路由封装如何实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React路由封装如何实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
了解SAP和路由的概念
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
import { default as React } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {Routes} from '../src//router/index'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Routes/>
);
reportWebVitals();router/index.js
//router/index.js文件
import { HashRouter as Router, Route, Switch } from "react-router-dom"
import routes from './mapRoute';
//定义的路由函数直接挂载到主页面上去
const Routes = function () {
console.log(routes);
return (
<Router>
<Switch>
{
routes.map((item,index)=>{
return (
<Route key={index} path={item.path} component={item.component}></Route>
)
})
}
</Switch>
</Router>
)
}
export default Routes;HashRouter as Router，这是给HashRouter起的别名，可以不写
router/mapRoute.js路由配置文件
import App from '../App';
import Detail from '../detail';
import Layout from "../admin/layout"
import About from '../pages/About';
const routes = [
{
path:"/about",
title:"About",
component:About,
},
{
path:"/admin",
title:"管理后台",
component:Layout,
exact:false,
},{
path:"/detail/:id",
title:"detail",
component:Detail,
},{
path:"/",
title:"App",
component:App,
}
]
export default routes;这样我们react中的路由就封装好了，他的原理是跟我们vue中的路由一样，把路由封装到一个文件中，然后我们就可以直接在这个里面添加路由，不同的是，vue中有一个children属性用来定义二级路由，而react中没有。我们在这个js文件中引入路由，然后在index文件中进行循环渲染，同时也减少了我们的代码量。不过需要注意的是，我们在react路由封装中不能使用二级路由，这是一个弊端，我们可以将二级路由定义在父组件中定义。
到此，关于“React路由封装如何实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论