共计 1419 个字符,预计需要花费 4 分钟才能阅读完成。
前提
- 了解 react 框架
- 熟悉 jsx 语法
- 有 react-router-dom 插件使用基础
react 路由封装
在 react 项目下 src 目录下新建 router 文件夹,router 文件目录下新建 index.js 和 config.js
- router/config.js —- 生成并抛出路由配置表
// 引入路由视图组件 | |
import Index from '../views/Index' | |
import Movie from '../views/two/Movie' | |
import Place from '../views/two/Place' | |
import My from '../views/two/My' | |
// 路由配置表 数组 | |
const routes=[ | |
{ | |
path:'/index', | |
component:Index, | |
children:[ | |
{ | |
path:'/index/movie', | |
component: Movie | |
}, | |
{ | |
path:'/index/place', | |
component: Place | |
}, | |
{ | |
path:'/index/my', | |
component: My | |
} | |
] | |
} | |
]; | |
// 抛出路由配置表 | |
export default routes; |
- router/index.js 加载路由视图组件的函数组件
// 加载路由视图组件得函数组件 - 加载条件 - 路由路径对应路由视图组件 一一对应得关系 ---> 获取路由配置表 | |
import React from 'react'; | |
// 引入路由内置组件 | |
import {Route} from 'react-router-dom' | |
const RouterView=(props)=>{ // 函数组件得 props 属性 | |
console.log(props.routes); // 获取路由配置表 | |
// 一一对应关系 遍历 | |
return props.routes.map((item,index)=>{ | |
// 路由对象 加载路由视图组件 | |
return <Route key={index} path={item.path} render={(routeProps)=>{ // routeProps 路由元信息 | |
// 判断当前得路由对象是否存在子路由 | |
if(item.children){ // 存在路由嵌套 递归函数 | |
return <item.component {...routeProps} routes={item.children}/> | |
}else{ // 不存在路由嵌套 | |
return <item.component {...routeProps}/> | |
} | |
}}/> | |
}) | |
} | |
export default RouterView; |
使用
// 根组件 App.js | |
import React, {Component} from 'react' | |
// 引入路由内置组件 | |
import {BrowserRouter} from 'react-router-dom' | |
// 引入加载路由视图得函数组件 | |
import RouterView from './router/index' | |
// 引入路由配置表 | |
import config from './router/config' | |
export default class App extends Component {render() { | |
return ( | |
<div className='App'> | |
<BrowserRouter> | |
{/* 加载 / 展示路由视图组件 */} | |
<RouterView routes={config}/> | |
</BrowserRouter> | |
</div> | |
) | |
} | |
} |
react 路由封装核心 —– 组件传参 /js 逻辑 / 递归函数
正文完
发表至: javascript
2020-07-02