react 一级路由封装全过程

最新推荐文章于 2026-01-06 06:00:00 发布

原创

最新推荐文章于 2026-01-06 06:00:00 发布 · 329 阅读

收录于

当前文章被以下社区和专栏收录：

本文详细介绍了如何在React项目中进行一级路由的封装过程，包括在router文件夹下创建routeConfig.js配置路由，将路由导入app.js，封装RouterView组件，并在app.js中使用，最后展示RouterView组件的完整代码。

1.在路由router文件夹下创建一个路由.js 例如：routeConfig.js

配置并导出：

var Index = lazy(()=>import('./views/Index'))   //首页
var Login = lazy(()=>import('./views/Login'))  // 登录页
var Register = lazy(()=>import('./views/Register'))  //注册
var NotFound = lazy(()=>import('./views/NotFound'))  //404页面
// 整个项目的路由表 
export default[
    {
        path:'/index',
        component:Index,
        expect:false
    },
    {
        path:'/login',
        component:Login,
        expect:false
    },
    {
        path:'/register',
        component:Register,
        expect:false
    },
    {
        from:'/',
        to:'/index',
        isRedirect:true,
        expect:false

    },
    {
        path:'/*',
        component:NotFound,
        expect:true
    }

]

3.命名导入路由

标签