react自动化构建路由

最新推荐文章于 2023-12-19 10:51:37 发布
最新推荐文章于 2023-12-19 10:51:37 发布
阅读量220 收藏 4
点赞数 1
文章标签： javascript reactjs es6 vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haha1991ha/article/details/116027035
版权

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中,作用就是通过传入的路由配置,然后计算出这个组件,那么问题来了,为什么要创建这个组件呢?

让我们回顾一下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(){
        //基石路由
        <Router>
            //路由配方组件 通过path匹配component
            <Route path="/" component={Home}/>
             <Route path="/mine" component={Mine}/>
        </Router>
    }
}

这是基本用法,所以我们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 <Route path={route.path} key={route.path} render={
                       // 这么写的作用就是,如果路由还有嵌套路由,那么我们可以把route中的children中的配置数据传递给这个组件,让组件再次调用CompileRouter的时候就能编译出嵌套路由了
                    () => <route.component routes={route.children} />
                } />
            })

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

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

4.使用CompileRouter

其实我们可以把封装的这个组件当成是vue-router中的视图组件<router-view/>就暂且先这么认为吧,接下来我们需要在页面上渲染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 (
            <Router>
                <Link to="/friends">朋友</Link>
                |
                <Link to="/discover">发现</Link>
                |
                <Link to="/mine">我的</Link>
                {/*当成是vue-router的视图组件 我们需要将路由配置数据传入*/}
                <CompileRouter routes={routes} />
            </Router>
        )
    }
}

export default App

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

5.嵌套路由处理

上面我们已经对1级路由进行了渲染,可以跳转,但是二级路由怎么处理呢?其实也很简单,我们只需要找到二级路由的父路由,继续使用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 (
            <li key={route.path}>
                <Link to={route.path}>{route.path}</Link>
            </li>
        )
    })
    return (
        <fieldset>
            <legend>发现</legend>
            <h1>我发现,不能说多喝热水</h1>
            <ul>
                {links}
            </ul>
            {/*核心代码,再次使用即可 这里将通过children数据可以渲染出Route*/}
            <CompileRouter routes={routes} />
        </fieldset>
    )
}
Discover.meta = {
    title: "发现",
    icon: ""
}
export default Discover

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

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

6. require.context

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

在这里插入图片描述

引入了很多的组件,实际上,在项目中引入的更多,如果一个一个引入,对我们来说是灾难性的,所以我们可以使用webpack提供的一个很好用的api,require.context我们先说说它是怎么使用的吧

自动化导入require.context方法,使用这个方法可以减少繁琐的组件引入,而且可以深度的递归目录,做到import做不到的事情 下面我们来看一下这个方法是如何使用的

使用

你可以通过 require.context() 函数来创建自己的 context。

可以给这个函数传入4个参数：

  1. 一个要搜索的目录，

  2. 一个标记表示是否还要搜索其子目录，

  3. 一个匹配文件的正则表达式。

  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和返回的值,我们只拿两个来做说明

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

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

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

  2. 获取路径下所有的模块

    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数据应该是下面这样的

//目的是什么?
//生成一个路由配置
 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组件,总结为亮点

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

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)

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

写在最后

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

React Router之动态路由思想
蛐蛐的博客
01-16 1736
1.简介 本指南的目的是解释使用React Router时要具有的思维模型。我们称其为“动态路由”，它与您可能更熟悉的“静态路由”完全不同。 2.静态路由 如果您使用过Rails，Express，Ember，Angular等，则使用了静态路由。 在这些框架中，您将在进行任何渲染之前将路由声明为应用程序初始化的一部分。React Router pre-v4也是静态的（主要是）。让我们看一下如何在express中配置路由： // Express Style routing: ...
React router根据路由自动生成路由
weixin_53690696的博客
02-26 563
react react-router 根据路径自动配置路由信息
2021-04-22
haha1991ha的博客
04-22 197
# react自动化构建路由 ## 序 在使用`react-router-dom`在编写项目的时候有种感觉就是,使用起来非常的方便,但是若是维护起来,那便是比较麻烦了,因为各大路由分散在各个组件中. 所以我们就会想到,使用`react-router-dom`中提供的`config`模式来编写我们的路由,这样写的好处就是我们可以将逻辑集中在一处,配置路由比较方便 ## 项目地址 https://gitee.com/d718781500/autoRouter ## 1.路由集中式 我们先将下列数据定
react自动化构建路由(简)
weixin_45760365的博客
11-11 775
react自动化构建路由(简) //require.context() // 1. 一个要搜索的目录， // 2. 一个标记表示是否还要搜索其子目录， // 3. 一个匹配文件的正则表达式。 let context = require.context("views", true, /\.js$/); let paths = context.keys()//获取了所有文件的路径 let routes = paths.map(path => { //批量获取引入的组件 let c
react中路由-嵌套路由-动态生成路由
❤的博客
07-01 2913
react中路由-嵌套路由-动态生成路由 react的路由 卡了一上午，我的理想化出来了 react-router-dom它分为一下几种情况： BrowserRouter 启动history模式的路由 Route 路由本由，通过path进行组件的渲染 Redirect 重定向路由 通过to属性进行反杀 Switch 当匹配到第一个路径相符合的路由的时候就不会往下找了 Link 类似于a标签进行路由导向 navLink 也是会生成a标签进行连接，跟link有差别 但是我还没有探究 。。。。还有一些其他
react自动处理路由
furfur-jiang的博客
11-13 334
为了避免一个一个route，提高开发效率 自动扫描views文件夹下的文件，我的要求的含list和index的扫下来 import React from 'react' import { Switch } from 'react-router-dom' import PrivateRouter from '../privateRouter/Index'; // 代替路由的录入 // 自动处理路由 const files = require.context('../../views', true, /\.js
使用React-Router实现前端路由鉴权的示例代码
11-20
通过这种方式，我们可以构建一个具备前端鉴权功能的React应用。用户的角色和权限信息应该在每次用户登录时进行验证，以确保他们只能访问被授权的页面。这个过程不仅提高了应用程序的安全性，还增强了用户体验，避免...
fullstack-flask-react-material-design：Flask React-使用自动化工具构建| AppSeed应用生成器
02-03
标题中的“fullstack-flask-react-material-design”是一个项目名称，暗示了这个项目是关于构建一个全栈应用程序，其中前端使用了React，后端使用了Flask，并且采用了Material Design作为界面设计风格。AppSeed应用...
浅析React项目如何自动生成路由
最新发布
new_handsome的博客
12-19 1193
React项目自动生成路由
React(react-router-dom) 根据路径自动配置路由，简单处理
m0_37602317的博客
10-19 1561
React(react-router-dom) 根据路径自动配置路由，简单处理 # 创建 create-react-app npx create-react-app my-app cd my-app npm start 在 src 目录下创建页面文件夹，如 pages # 安装 react-router-dom yarn add react-router-dom // app.js import './App.css'; import { BrowserRouter as Router, Route,
react-配置路由表
m0_72725063的博客
09-20 1347
配置react路由表
React(react-router-dom) 根据路径自动配置路由 第三版
m0_37602317的博客
11-09 1293
React(react-router-dom) 根据路径自动配置路由 第三版 这一版本主要 调整了 src\utils\common.tsx，重点更改了匹配逻辑。 现版本，使用路由组件，不再需要使用文件夹包裹，直接跟在文件夹后即可，同时新增了{} 匹配规则 例如：{e} 即使用 exact 修饰 同时每个页面的配置都是独立的，不会依赖到父级 配置规则 如 /Home(AuthRoute){e}/Default[id] 会转换为 <AuthRoute exact path="/home:id" ...
react项目中使用后端返回的JSON数据生成路由
XiZiRuanJianKeJi的博客
08-16 803
使用后端返回的数据来动态生成react项目的路由
React-5-路由
HBF__cg的博客
07-14 281
1.路由  当应用变得复杂的时候，就需要分块的进行处理和展示  传统模式下，我们是把整个应用分成了多个页面，然后通过 URL 进行连接。  但是这种方式也有一些问题，每次切换页面都需要重新发送所有请求和渲染整个页面，不止性能上会有影响，同时也会导致整个JS重新执行,丢失状态 2.SPA  单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容  优点:   1.减少请求和渲染和页面跳转产生的等待与空白,用户体验更好,页面切换更快   2.重
React路由嵌套，基于路由文件生成路由
pgLi
06-10 690
环境： "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", 路由配置 routers.tsx文件内容 const routers = [ { path: '/layout', component: RouterLayoutConfig }, { path: '/component', component: Rou
Umi4 从零开始实现动态路由、动态菜单
热门推荐
绿胡子大叔的博客
10-04 1万+
近期在写 Umi4 的练习项目，计划实现一个从服务器获取路由信息并动态生成前端路由和导航菜单的功能。本文记录了相关知识、思路以及开发过程中踩到的坑。
React--Umi和Dva
qq_44930306的博客
10-12 3743
Umi 以路由为基础,解决了之前使用react-router-dom的时候使用路由的复杂度)； ​ dva 是一个基于 redux 和 redux-saga 的数据流方案 ​
React项目构建指南：从自动化到环境变量配置
资源摘要信息:"React-project:正式的React项目"是一个关于构建和维护React应用程序的综合指南。该指南包含了从创建新项目、添加依赖、配置开发环境到代码优化和部署的整个生命周期的详细说明。文中提到的技术和概念...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值