当前位置: 开发笔记 > 前端 > 正文

react自动化构建路由的实现

作者：mobiledu2502923581 | 来源：互联网 | 2022-03-10 00:59

这篇文章主要介绍了react自动化构建路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

序

在使用react-router-dom在编写项目的时候有种感觉就是,使用起来非常的方便,但是若是维护起来,那便是比较麻烦了,因为各大路由分散在各个组件中. 所以我们就会想到,使用react-router-dom中提供的config模式来编写我们的路由,这样写的好处就是我们可以将逻辑集中在一处,配置路由比较方便

项目地址
https://gitee.com/d718781500/autoRouter

1.路由集中式

我们先将下列数据定义在/src/router/index.js中
在react的路由官方文档中就提供了配置集中式路由的案例,大致是这样的仿照vue的路由,生成一个配置文件,预期是这样的

//需要一个路由的配置,它是一个数组
import Discover from "../pages/Discover"
import Djradio from "../pages/Discover/Djradio"
import Playlist from "../pages/Discover/Playlist"
import Toplist from "../pages/Discover/Toplist"
import Friends from "../pages/Friends"
import Mine from "../pages/Mine"
import Page404 from "../pages/Page404"
const routes = [
    {
        path: "/friends",
        component: Friends
    },
    {
        path: "/mine",
        component: Mine
    },
    
    {
        path: "/discover",
        component: Discover,
        children: [
            {
                path: "/discover/djradio",
                component: Djradio
            },
            {
                path: "/discover/playlist",
                component: Playlist

            },
            {
                path: "/discover/toplist",
                component: Toplist
            }
        ]
    },
    {//Page404这个配置一定要在所有路由配置之后
        path: "*",
        component: Page404
    }
]

export default routes

我们可以通过上述配置,来生成一个路由.当然上述的配置也只是做了简单的处理,还有redirect exact等属性没有写,我们还是从一个简单的开始吧

2.文件目录

上述的配置中使用了类似于vue的集中式路由配置模式,那么下面就展示下我当前这个demo的结构目录吧

项目目录结构

src/pages目录结构

├─Discover
│  │  abc.js
│  │  index.js
│  │
│  ├─Djradio
│  │  │  index.js
│  │  │  lf.js
│  │  │
│  │  └─gv
│  │          index.js
│  │
│  ├─Playlist
│  │      index.js
│  │
│  └─Toplist
│          index.js
│
├─Entertaiment
│      index.js
│
├─Friends
│      index.js
│      xb.js
│
├─Mine
│      index.js
│
└─Page404
        index.js

有了这些结构之后,那么在1中提到的引入文件结合起来看就不懵逼啦,接下来我们可以封装一个组件,给他取个名字叫做CompileRouter这个组件专门用于编译路由

3.创建CompileRouter

这个组件我们把它创建在src/utils中,作用就是通过传入的路由配置,然后计算出这个组件,那么问题来了,为什么要创建这个组件呢&＃63;

让我们回顾一下react路由的编写方式吧,react路由需要一个基础组件HashRouter或者BrowserRouter这两个相当于一个基石组件
然后还需要一个路由配方这个组件可以接受一个path映射一个component

我们来写段伪代码来说明一下

//引入路由基本组件(要在项目中安装 npm i react-router-dom)
import {HashRouter as Router,Route} from "react-router-dom"
class Demo extends React.Component {
    render(){
        //基石路由
        
            //路由配方组件 通过path匹配component
            
             
        
    }
}

这是基本用法,所以我们CompileRouter这个组件的工作就是,生成如上代码中的Route一样,生成Route然后展示在组件上
在了解到Compile的基本作用之后,下面我们就开始编码吧
我个CompileRouter设计是接受一个数据,这个数据必须是符合路由配置的一个数组,就像1里代码中所示的数组一样,接受的属性为routes

//这个文件通过routes配置来编译出路由
import React from 'react'
import { Switch, Route } from "react-router-dom";
export default class CompileRouter extends React.Component {
    constructor() {
        super()
        this.state = {
            c: []
        }
    }
    renderRoute() {
        let { routes } = this.props;//获取routes路由配置
        //1.通过routes生成Route组件
        //确保routes是一个数组
        // console.log(routes)
        //render 不会重复让组件的componentDidMount和componentWillUnmount重复调用
        if (Array.isArray(routes) && routes.length > 0) {
            //确保传入的routes是个数组
           // 循环迭代传入的routes
            let finalRoutes = routes.map(route => {
                //每个route是这个样子的 {path:"xxx",component:"xxx"}
                //如果route有子节点 {path:"xxx",component:"xxx",children:[{path:"xxx"}]}
                return  
                } />
            })

            this.setState({
                c: finalRoutes
            })
        } else {
            throw new Error('routes必须是一个数组,并且长度要大于0')
        }
    }
    componentDidMount() {
        //确保首次调用renderRoute计算出Route组件
        this.renderRoute()
    }
    render() {
        let { c } = this.state;
        return (
            
                {c}
            
        )
    }
}

上述代码就是用于去处理routes数据并且声称这样的组件,每一步的作用我都已经在上面用注释标明了

4.使用CompileRouter

其实我们可以把封装的这个组件当成是vue-router中的视图组件就暂且先这么认为吧,接下来我们需要在页面上渲染1级路由了

在src/app.js

import React from 'react'
import { HashRouter as Router, Link } from 'react-router-dom'
//引入我们封装的CompileRouter罪案
import CompileRouter from "./utils/compileRouter"
//引入在1中定义的路由配置数据
import routes from "./router"
console.log(routes)
class App extends React.Component {
    render() {
        return (
            
                朋友
                |
                发现
                |
                我的
                {/*当成是vue-router的视图组件 我们需要将路由配置数据传入*/}
                
            
        )
    }
}

export default App

写完后,那么页面上其实就可以完美的展示1级路由了

5.嵌套路由处理

上面我们已经对1级路由进行了渲染,可以跳转,但是二级路由怎么处理呢&＃63;其实也很简单,我们只需要找到二级路由的父路由,继续使用CompileRouter就可以了
我们从配置中可以看到,Discover这个路由是具有嵌套路由的,所以我们就以Discover路由为例子,首先我们看下结构图

图上的index.js就是Discover这个视图组件了,也是嵌套路由的父级路由,所以我们只需要在这个index.js中继续使用CompileRouter就可以了

import React from 'react'
import { Link } from "react-router-dom"

import CompileRouter from "../../utils/compileRouter"
function Discover(props) {

    let { routes } = props //这个数据是从ComileRouter组件编译的时候传递过来的children
    // console.log(routes)
    let links = routes.map(route => {
        return (
            
                {route.path}
            
        )
    })
    return (
        
            发现
            我发现,不能说多喝热水
            
                {links}
            
            {/*核心代码,再次使用即可 这里将通过children数据可以渲染出Route*/}
            
        
    )
}
Discover.meta = {
    title: "发现",
    icon: ""
}
export default Discover

所以我们以后记住,只要是有嵌套路由我们要做两件事

配置routes
在嵌套路由的父级路由中再次使用CompileRouter,并且传入routes即可

6. require.context

上面我们实现了一个路由集中式的配置,但是我们会发现一个问题

引入了很多的组件,实际上,在项目中引入的更多,如果一个一个引入,对我们来说是灾难性的,所以我们可以使用webpack提供的一个很好用的api,require.context我们先说说它是怎么使用的吧
自动化导入require.context方法,使用这个方法可以减少繁琐的组件引入,而且可以深度的递归目录,做到import做不到的事情下面我们来看一下这个方法是如何使用的

使用

你可以通过 require.context() 函数来创建自己的 context。
可以给这个函数传入4个参数：

一个要搜索的目录，
一个标记表示是否还要搜索其子目录，
一个匹配文件的正则表达式。
mode 模块加载模式，常用值为 sync、lazy、lazy-once、eager
- sync 直接打包到当前文件，同步加载并执行
- lazy 延迟加载会分离出单独的 chunk 文件
- lazy-once 延迟加载会分离出单独的 chunk 文件，加载过下次再加载直接读取内存里的代码。
- eager 不会分离出单独的 chunk 文件，但是会返回 promise，只有调用了 promise 才会执行代码，可以理解为先加载了代码，但是我们可以控制延迟执行这部分代码。

webpack 会在构建中解析代码中的 require.context() 。

语法如下：

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

示例：

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。
require.context('../', true, /\.stories\.js$/);
// （创建出）一个 context，其中所有文件都来自父文件夹及其所有子级文件夹，request 以 `.stories.js` 结尾。

api

函数有三个属性：resolve, keys, id。

resolve 是一个函数，它返回 request 被解析后得到的模块 id。

let p = require.context("...",true,"xxx")
p.resolve("一个路径")

keys 也是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求（译者注：参考下面第二段代码中的 key）组成。

require.context的返回值是一个函数,我们可以在函数中传入文件的路径,就可以得到模块化的组件了

let compOnents= require.context('../pages', true, /\.js$/, 'sync')

let paths = components.keys()//获得了所有引入文件的地址
// console.log(paths)
let routes = paths.map(path => {
    let compOnent= components(path).default
    path = path.substr(1).replace(/\/\w+\.js$/,"")
    return {
        path,
        component
    }
})
console.log(routes)

总结

虽然上面有很多api和返回的值,我们只拿两个来做说明

keys方法,这个可以获取所有模块的路径,返回的是一个数组

let cOntext= require.context("../pages", true, /\.js$/);

let paths = context.keys()//获取了所有文件的路径

获取路径下所有的模块

let cOntext= require.context("../pages", true, /\.js$/);

let paths = context.keys()//获取了所有文件的路径

let routes = paths.map(path => {
    //批量获取引入的组件
    let compOnent= context(path).default;
    console.log(component)
    })

掌握这两个就可以了,下面我们来继续处理

7.扁平数据转换为树形结构的(convertTree算法)

这个算法的名字是我自己起的,首先我们要明白为甚么需要将数据转换成tree
我们的预期的routes数据应该是下面这样的

//目的是什么&＃63;
//生成一个路由配置
 const routes = [
     {
         path: "",
         component:xxx
          children:[
                 {
                     path:"xxx"
                     component:xxx
                 }
            ]
     }
 ]

但其实我们使用require.context处理之后的数据是这样的

可以看到这个数据是完全扁平化的,没有任何的嵌套,所以我们第一步就是要实现将这种扁平化的数据转换为符合我们预期的树形结构,下面我们一步一步来

7.1使用require.context将数据处理成扁平化

首先要处理成上图那样的结构,代码都有注释,难度也不高

//require.context()

// 1. 一个要搜索的目录，
// 2. 一个标记表示是否还要搜索其子目录， 
// 3. 一个匹配文件的正则表达式。
let cOntext= require.context("../pages", true, /\.js$/);

let paths = context.keys()//获取了所有文件的路径


let routes = paths.map(path => {
    //批量获取引入的组件
    let compOnent= context(path).default;
    //组件扩展属性方便渲染菜单
    let meta = component['meta'] || {}
    //console.log(path)
    //这个正则的目的
    //因为地址是./Discover/Djradio/index.js这种类型的并不能直接使用,所以要进行处理
    //1.接去掉最前的"." 得到的结果是/Discover/Djradio/index.js
    //2.处理了还是不能直接用 因为我们的预期/Discover/Djradio,所以通过正则将index.js干掉了
    //3.有可能后面的路径不是文件夹 得到的结果是/Discover/abc.js,后缀名并不能用到路由配置的path属性中,所以.js后缀名又用正则替换掉
    path = path.substr(1).replace(/(\/index\.js|\.js)$/, "")
    // console.log(path)
    return {
        path,
        component,
        meta
    }
})

7.2 实现convertTree算法

上面处理好了数据后,我们封装一个方法,专门用于处理扁平化数据变成树形数据,算法时间复杂度为O(n^2)

function convertTree(routes) {
    let treeArr = [];
    //1.处理数据 将每条数据的id和parent处理好 (俗称 爸爸去哪儿了)
    routes.forEach(route => {
        let comparePaths = route.path.substr(1).split("/")
        // console.log(comparePaths)
        if (comparePaths.length === 1) {
            //说明是根节点,根节点不需要添加parent_id
            route.id = comparePaths.join("")
        } else {
            //说明具有父节点
            //先处理自己的id
            route.id = comparePaths.join("");
            //comparePaths除去最后一项就是parent_id
            comparePaths.pop()
            route.parent_id = comparePaths.join("")
        }
    })
    //2.所有的数据都已经找到了父节点的id,下面才是真正的找父节点了
    routes.forEach(route => {
        //判断当前的route有没有parent_id
        if (route.parent_id) {
            //有父节点
            //id===parent_id的那个route就是当前route的父节点
            let target = routes.find(v => v.id === route.parent_id);
            //判断父节点有没有children这个属性
            if (!target.children) {
                target.children = []
            }
            target.children.push(route)
        } else {
            treeArr.push(route)
        }
    })

    return treeArr
}

通过上述处理之后就可以得到树形结构啦

接下来我们只需要把数据导出去,在app上引入传递给CompileRouter组件就可以了

7.3 以后要注意的

以后只需要在pages中创建文件即可自动实现路由的处理以及编译了,不过对于嵌套级别的路由咱们别忘了要在路由组件加上CompileRouter组件,总结为亮点

创建路由页面
嵌套路由的父级路由组件中加入

8.扩展静态属性

我们当前创建出来的效果是有了,但是如果我们用于渲染菜单的时候就会有问题,没有内容可以用于渲染菜单,所以我们可以给组件上扩展静态属性meta(也可以是别的),然后对我们的自动化编译代码做一些小小的改动就行了

组件

自动化处理逻辑完整代码

//require.context()

// 1. 一个要搜索的目录，
// 2. 一个标记表示是否还要搜索其子目录， 
// 3. 一个匹配文件的正则表达式。
let cOntext= require.context("../pages", true, /\.js$/);

let paths = context.keys()//获取了所有文件的路径


let routes = paths.map(path => {
    //批量获取引入的组件
    let compOnent= context(path).default;
    //组件扩展属性方便渲染菜单
    let meta = component['meta'] || {}
    //console.log(path)
    //这个正则的目的
    //因为地址是./Discover/Djradio/index.js这种类型的并不能直接使用,所以要进行处理
    //1.接去掉最前的"." 得到的结果是/Discover/Djradio/index.js
    //2.处理了还是不能直接用 因为我们的预期/Discover/Djradio,所以通过正则将index.js干掉了
    //3.有可能后面的路径不是文件夹 得到的结果是/Discover/abc.js,后缀名并不能用到路由配置的path属性中,所以.js后缀名又用正则替换掉
    path = path.substr(1).replace(/(\/index\.js|\.js)$/, "")
    // console.log(path)
    return {
        path,
        component,
        meta
    }
})
//这种数据是扁平化的数据,并不符合我们的路由规则
//需要做算法 尽可能将时间复杂度降低o(n)最好
//封装一个convertTree算法 时间复杂度o(n^2)
// console.log(routes)

//id
//parent_id

function convertTree(routes) {
    let treeArr = [];
    //1.处理数据 将每条数据的id和parent处理好 (俗称 爸爸去哪儿了)
    routes.forEach(route => {
        let comparePaths = route.path.substr(1).split("/")
        // console.log(comparePaths)
        if (comparePaths.length === 1) {
            //说明是根节点,根节点不需要添加parent_id
            route.id = comparePaths.join("")
        } else {
            //说明具有父节点
            //先处理自己的id
            route.id = comparePaths.join("");
            //comparePaths除去最后一项就是parent_id
            comparePaths.pop()
            route.parent_id = comparePaths.join("")
        }
    })
    //2.所有的数据都已经找到了父节点的id,下面才是真正的找父节点了
    routes.forEach(route => {
        //判断当前的route有没有parent_id
        if (route.parent_id) {
            //有父节点
            //id===parent_id的那个route就是当前route的父节点
            let target = routes.find(v => v.id === route.parent_id);
            //判断父节点有没有children这个属性
            if (!target.children) {
                target.children = []
            }
            target.children.push(route)
        } else {
            treeArr.push(route)
        }
    })

    return treeArr
}

export default convertTree(routes)

//获取一个模块
// console.log(p("./Discover/index.js").default)

//目的是什么&＃63;
//生成一个路由配置
// const routes = [
//     {
//         path: "",
//         component,
//          children:[
//                 {path component}
//             ]
//     }
// ]

写在最后

其实上述的处理并不能作为应用级别用于项目中,主要在于CompileRouter处理的不够细致,下一期我将专门写一篇如何处理CompileRouter用于鉴权等应用在项目中

到此这篇关于react自动化构建路由的实现的文章就介绍到这了,更多相关react自动化构建路由内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

推荐阅读

vue.js
从零开始构建完整手机站：Vue CLI 3 实战指南（第一部分）

本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点，并确保这些内容与实际工作中的需求紧密结合。 ... [详细]

蜡笔小新 2024-12-26 13:30:37
vue.js
LeetCode 991：故障计算器的最优解法

探讨一个显示数字的故障计算器，它支持两种操作：将当前数字乘以2或减去1。本文将详细介绍如何用最少的操作次数将初始值X转换为目标值Y。 ... [详细]

蜡笔小新 2024-12-27 14:34:44
dom
基于Node.js、Express、MongoDB和Socket.io的实时聊天应用开发

本文详细介绍了使用Node.js、Express、MongoDB和Socket.io构建的实时聊天应用程序。涵盖项目结构、技术栈选择及关键依赖项的配置。 ... [详细]

蜡笔小新 2024-12-22 15:31:28
dom
网络攻防实战：从HTTP到HTTPS的演变

本文通过一系列日记记录了从发现漏洞到逐步加强安全措施的过程，探讨了如何应对网络攻击并最终实现全面的安全防护。 ... [详细]

蜡笔小新 2024-12-27 11:34:50
dom
扫描线三巨头 hdu1928hdu 1255 hdu 1542 [POJ 1151]

学习链接：http:blog.csdn.netlwt36articledetails48908031学习扫描线主要学习的是一种扫描的思想，后期可以求解很 ... [详细]

蜡笔小新 2024-12-26 20:04:36
dom
Spring Boot 中使用 @PropertySource 读取自定义配置文件的最佳实践

本文详细介绍了如何在 Spring Boot 应用中通过 @PropertySource 注解读取非默认配置文件，包括配置文件的创建、映射类的设计以及确保 Spring 容器能够正确加载这些配置的方法。 ... [详细]

蜡笔小新 2024-12-26 19:35:47
dom
HTML Attribute Naming Conventions for Fast Components

This document outlines the recommended naming conventions for HTML attributes in Fast Components, focusing on readability and consistency with existing standards. ... [详细]

蜡笔小新 2024-12-26 19:13:45
dom
告别传统文件传输，迎接新一代高效工具Croc

在现代网络环境中，两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效，但其配置复杂、步骤繁琐，难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc，它不仅简化了操作流程，还提供了强大的加密和跨平台支持。 ... [详细]

蜡笔小新 2024-12-26 16:16:06
dom
解决微信电脑版无法刷朋友圈问题：使用安卓远程投屏方案

在工作期间想要浏览微信和朋友圈却不太方便？虽然微信电脑版目前不支持直接刷朋友圈，但通过远程投屏技术，可以轻松实现在电脑上操作安卓设备的功能。 ... [详细]

蜡笔小新 2024-12-26 15:23:19
dom
软件工程个人学习报告

本报告涵盖了个人博客账号和码云账号的注册过程，以及对网络工程专业学习的反思与展望。通过回顾初入大学时的专业选择，分析当前的专业知识和技能水平，并对未来的职业规划进行了详细讨论。 ... [详细]

蜡笔小新 2024-12-26 12:59:03
dom
libsodium 1.0.15 发布：引入重大不兼容更新

最新发布的 libsodium 1.0.15 版本带来了若干不兼容的变更，其中包括默认密码散列算法的更改和其他重要调整。 ... [详细]

蜡笔小新 2024-12-26 11:03:58
dom
基于KVM的SRIOV直通配置及性能测试

SRIOV介绍、VF直通配置，以及包转发率性能测试小慢哥的原创文章，欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]

蜡笔小新 2024-12-25 19:26:39
css
Git 分布式版本控制系统：远程仓库的深入探讨

本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例，帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]

蜡笔小新 2024-12-25 18:30:21
label
毕业设计：基于机器学习与深度学习的垃圾邮件（短信）分类算法实现

本文详细介绍了如何使用机器学习和深度学习技术对垃圾邮件和短信进行分类。内容涵盖从数据集介绍、预处理、特征提取到模型训练与评估的完整流程，并提供了具体的代码示例和实验结果。 ... [详细]

蜡笔小新 2024-12-25 17:38:50
view
dotnet 通过 Elmish.WPF 使用 F# 编写 WPF 应用

本文来安利大家一个有趣而且强大的库，通过F#和C#混合编程编写WPF应用，可以在WPF中使用到F#强大的数据处理能力在GitHub上完全开源Elmis ... [详细]

蜡笔小新 2024-12-25 16:06:42

mobiledu2502923581

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章