本文解析React项目中路由封装的实现方法。首先介绍SAP单页应用概念及传统跳转弊端，阐述react-router-dom的作用。接着详细说明如何抽离路由配置至router文件夹，通过index.js循环渲染Route组件，并将配置转为数组格式。文章指出React封装中二级路由需在父组件处理，并提供了核心代码示例，帮助开发者优化项目结构。
了解SAP和路由的概念
SAP（single page web application）即单页Web应用。如前言所述，功能复杂的应用通常涉及页面跳转。传统前端跳转多利用<a/>标签，虽能实现功能，但每次跳转都会重新加载页面元素，用户体验不佳。单页Web应用解决了这一问题，因为整个应用在一个页面内运行，页面跳转仅涉及对应组件（模块）的更新，无需重复加载页面元素。
再说说路由
路由可理解为路径与组件或函数的映射关系，例如/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路由封装的实现浅析的文章就介绍到这了,更多相关React路由封装内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！