React路由V5版本的封装（类组件的封装）

最新推荐文章于 2024-06-09 21:15:24 发布

前端小鸡

最新推荐文章于 2024-06-09 21:15:24 发布

阅读量302

点赞数 1

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/m0_53164768/article/details/128881439

版权

文章介绍了如何在Reactv5环境下封装路由组件，包括在routeConfig.js中创建路由规则，使用lazy和Suspense进行代码分割和按需加载，以及在RouterView.jsx中封装Switch和Route。同时，文中提到当前实现缺少二级路由的封装，需要进一步扩展。

摘要由CSDN通过智能技术生成

首先在封装react组件的前提是：v5版本的路由，以及需要创建一个自己文件夹，我这块的文件夹名称为：router，router文件夹包括了一个路由的配置规则，还有一个是自己封装的路由组件

在routeConfing.js中创建路由规则

import React, { Component,lazy,Suspense } from 'react';

var Index = lazy(()=>import('../views/Index'))
var Login = lazy(()=>import('../views/Login'))
var Register = lazy(()=>import('../views/Register'))
var NotFound = lazy(()=>import('../views/NotFound'))
var Detail = lazy(()=>import('../views/Detail'))

//整个应用的路由配置表
export default [
    {
        path:'/index',
        component:Index,
        exact:false
    },
    {
        path:'/login',
        component:Login,
        exact:true
    },
    {
        path:'/register',
        component:Register,
        exact:true
    },
    {
        path:'/deatil',
        component:Detail,
        exact:true
    },
    {
        from:'/',
        to:'/index',
        exact:true,
        isRedirect:true
    },
    {
        path:'*',
        exact:false,
        component:NotFound
    },
]

在routerView.jsx文件中封装路由的组件

import React, { Component, Fragment,Suspense } from 'react';
import { Switch,Route,Redirect } from 'react-router-dom'

class RouterView extends Component {
    render() {
        
        return (
            <div>
                <Suspense fallback={<div className='loading'>loading...</div>}>
                    <Switch>
                        {
                            this.props.routes.map((item,index)=>{
                                return (
                                    !item.isRedirect ?
                                    <Route key={index} exact={item.exact} path={item.path} render={()=>{
                                        return <item.component />
                                    }} />
                                    :
                                    <Redirect key={index} exact from={item.from} to={item.to} />
                                )
                            })
                        }
                    </Switch>
                </Suspense>
            </div>
        );
    }
}

export default RouterView;

在需要使用的路由规则的路由文件中，引用路由组件，这里通过的是父传子的方法进行传值

//导入路由配置表
import routes from './router/routeConfig'

import RouterView from './router/RouterView'
class App extends Component {
  render() {
    return (
      <div className='app'> 
         {/* 动态渲染路由规则 */}
         <RouterView routes={routes}> </RouterView>

      </div>
    );
  }    
}

export default App;

以上的路由组件封装缺少二级路由的封装，因此需要大家自己根据思路完成二级路由的完善，