Implementation of react automatic construction routing

sequence
1. Centralized routing
2. File Directory
3. Create CompileRouter
4. Use CompileRouter
5. Nested route processing
6. require.context

use
API
Summarize

7. Converting flat data to tree structure (convertTree algorithm)

7.1 Use require.context to flatten data
7.2 Implementing the convertTree algorithm
7.3 Things to note in the future

8. Extending static properties

Components
Complete code of automation processing logic

Final Thoughts

sequence

When using react-router-dom to write a project, I feel that it is very convenient to use, but it is more troublesome to maintain because the major routes are scattered in various components. So we will think of using the config mode provided in react-router-dom to write our routes. The advantage of this is that we can concentrate the logic in one place and configure the routes more conveniently.

Project gallery
https://gitee.com/d718781500/autoRouter

1. Centralized routing

We first define the following data in /src/router/index.js. The official documentation of react's routing provides a case for configuring centralized routing, which is roughly like this: Following the routing of vue, generate a configuration file, which is expected to be like this

//A routing configuration is required, which is an array 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 This configuration must be after all routing configurations path: "*",
        component: Page404
    }
]

export default routes

We can use the above configuration to generate a route. Of course, the above configuration is just a simple process, and there are still attributes such as redirect exact that are not written. Let's start with a simple one.

2. File Directory

The above configuration uses a centralized routing configuration mode similar to vue, so let's show the structure directory of my current demo.

Project directory structure

src/pages directory structure

├─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

With these structures, the imported files mentioned in 1 are not confusing. Next, we can encapsulate a component and name it CompileRouter. This component is specifically used to compile routes.

3. Create CompileRouter

We create this component in src/utils. Its function is to calculate this component through the incoming routing configuration. So the question is, why do we need to create this component?

Let's review how to write react routing. React routing requires a basic component HashRouter or BrowserRouter, which is equivalent to a cornerstone component. Then it also needs a routing recipe. This component can accept a path mapping a component.

Let's write some pseudo code to illustrate this.

//Introduce the basic routing components (to install npm i react-router-dom in the project)
import {HashRouter as Router,Route} from "react-router-dom"
class Demo extends React.Component {
    render(){
        //Cornerstone Routing <Router>
            //The routing recipe component matches the component by path
            <Route path="/" component={Home}/>
             <Route path="/mine" component={Mine}/>
        </Router>
    }
}

This is the basic usage, so the job of our CompileRouter component is to generate the Route as shown in the code above, generate the Route and then display it on the component. After understanding the basic function of Compile, let's start coding. My CompileRouter is designed to accept a data, which must be an array that conforms to the routing configuration, just like the array shown in the code in 1, and the accepted attribute is routes.

//This file compiles the routes through the routes configuration 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; //Get routes routing configuration //1. Generate Route component through routes //Make sure routes is an array // console.log(routes)
        //render will not call componentDidMount and componentWillUnmount repeatedly if (Array.isArray(routes) && routes.length > 0) {
            // Make sure the incoming routes is an array // Loop through the incoming routes
            let finalRoutes = routes.map(route => {
                //Each route looks like this {path:"xxx",component:"xxx"}
                //If route has child nodes {path:"xxx",component:"xxx",children:[{path:"xxx"}]}
                return <Route path={route.path} key={route.path} render={
                       // The purpose of this is that if the route has nested routes, we can pass the configuration data in the children of the route to this component, so that the component can compile the nested routes when calling CompileRouter again() => <route.component routes={route.children} />
                } />
            })

            this.setState({
                c: finalRoutes
            })
        } else {
            throw new Error('routes must be an array and its length must be greater than 0')
        }
    }
    componentDidMount() {
        // Make sure renderRoute is called for the first time to calculate the Route component this.renderRoute()
    }
    render() {
        let { c } = this.state;
        return (
            <Switch>
                {c}
            </Switch>
        )
    }
}

The above code is used to process routes data and declare such a component. I have marked the role of each step with comments above.

4. Use CompileRouter

In fact, we can regard this encapsulated component as the view component <router-view/> in vue-router. Let's think of it this way for now. Next, we need to render the first-level route on the page.

In src/app.js

import React from 'react'
import { HashRouter as Router, Link } from 'react-router-dom'
//Introduce our encapsulated CompileRouter crime import CompileRouter from "./utils/compileRouter"
//Import the routing configuration data defined in 1 import routes from "./router"
console.log(routes)
class App extends React.Component {
    render() {
        return (
            <Router>
                <Link to="/friends">Friends</Link>
                |
                <Link to="/discover">Discover</Link>
                |
                <Link to="/mine">My</Link>
                {/*As a view component of vue-router, we need to pass in the routing configuration data*/}
                <CompileRouter routes={routes} />
            </Router>
        )
    }
}

export default App

After writing, the page can actually perfectly display the level 1 routing

5. Nested route processing

We have rendered the first-level route above and can jump, but how to deal with the second-level route? In fact, it is also very simple. We only need to find the parent route of the second-level route and continue to use CompileRouter. We can see from the configuration that the Discover route has nested routes, so we take the Discover route as an example. First, let's look at the structure diagram

The index.js in the figure is the Discover view component, which is also the parent route of the nested route, so we only need to continue using CompileRouter in this index.js.

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

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

    let { routes } = props //This data is passed from the children when the ComileRouter component is compiled
    // console.log(routes)
    let links = routes.map(route => {
        return (
            <li key={route.path}>
                <Link to={route.path}>{route.path}</Link>
            </li>
        )
    })
    return (
        <fieldset>
            <legend>Discovery</legend>
            <h1>I found that you can’t just drink more hot water</h1>
            <ul>
                {links}
            </ul>
            {/*Core code, you can use it again here to render the Route through the children data*/}
            <CompileRouter routes={routes} />
        </fieldset>
    )
}
Discover.meta = {
    title: "Discovery",
    icon: ""
}
export default Discover

So we remember that as long as there is a nested route, we have to do two things

Configuring routes
Use CompileRouter again in the parent route of the nested route and pass in routes

6. require.context

We have implemented a centralized routing configuration above, but we will find a problem

A lot of components are introduced. In fact, more are introduced in the project. If we introduce them one by one, it will be disastrous for us. So we can use a very useful API provided by webpack, require.context. Let's talk about how to use it first. Automatically import the require.context method. Using this method can reduce the tedious component introduction, and can deeply recurse the directory, doing things that import cannot do. Let's take a look at how to use this method

use

You can create your own context using the require.context() function.
You can pass 4 parameters to this function:

a directory to search,
A flag indicating whether to search subdirectories as well.
A regular expression that matches files.
mode module loading mode, common values are sync, lazy, lazy-once, eager
- sync directly packages into the current file, loads and executes synchronously
- Lazy loading will separate separate chunk files
- Lazy-once delayed loading will separate a separate chunk file, and the next time you load it, you can directly read the code in the memory.
- eager will not separate out a separate chunk file, but will return a promise. The code will only be executed when the promise is called. It can be understood that the code is loaded first, but we can control the delayed execution of this part of the code.

webpack will parse require.context() in your code during the build.

The syntax is as follows:

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

Example:

require.context('./test', false, /\.test\.js$/);
//(Create) a context where the file comes from the test directory and the request ends with `.test.js`.
require.context('../', true, /\.stories\.js$/);
// (Create) a context where all files come from the parent folder and all its subfolders, and the request ends with `.stories.js`.

API

The function has three properties: resolve, keys, id.

resolve is a function that returns the module id obtained after the request is resolved.

let p = require.context("...",true,"xxx")
p.resolve("a path")

keys is also a function that returns an array consisting of all requests that may be handled by this context module (Translator's note: refer to the key in the second code snippet below).

The return value of require.context is a function. We can pass the path of the file into the function to get a modular component.

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

let paths = components.keys() //Get the addresses of all imported files // 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)

Summarize

Although there are many APIs and returned values above, we will only take two for illustration.

keys method, which can get the path of all modules and return an array

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

let paths = context.keys() //Get the paths of all files

Get all modules under the path

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

let paths = context.keys() //Get the paths of all files let routes = paths.map(path => {
    //Batch get the imported components let component = context(path).default;
    console.log(component)
    })

Just master these two, let's continue processing

7. Converting flat data to tree structure (convertTree algorithm)

I named this algorithm myself. First, we need to understand why we need to convert data into a tree.
Our expected routes data should be as follows

//What is the purpose?
//Generate a routing configuration const routes = [
     {
         path: "",
         component:xxx
          children:[
                 {
                     path:"xxx"
                     component:xxx
                 }
            ]
     }
 ]

But in fact, the data after we use require.context processing is like this

You can see that the data is completely flat, without any nesting, so our first step is to convert this flat data into a tree structure that meets our expectations. Let's do it step by step.

7.1 Use require.context to flatten data

First, we need to process it into the structure shown above. The code has comments and the difficulty is not high.

//require.context()

// 1. A directory to search,
// 2. A flag indicating whether to search its subdirectories as well. 
// 3. A regular expression that matches files.
let context = require.context("../pages", true, /\.js$/);

let paths = context.keys() //Get the paths of all files let routes = paths.map(path => {
    //Batch get the imported components let component = context(path).default;
    //Component extended attributes to facilitate rendering menu let meta = component['meta'] || {}
    //console.log(path)
    //The purpose of this regular expression //Because the address is ./Discover/Djradio/index.js, this type of address cannot be used directly, so it needs to be processed //1. Then remove the first "." and the result is /Discover/Djradio/index.js
    //2. After processing, it still cannot be used directly because we expect /Discover/Djradio, so we use regular expression to kill index.js //3. It is possible that the subsequent path is not a folder and the result is /Discover/abc.js. The suffix name cannot be used in the path attribute of the routing configuration, so the .js suffix name is replaced by regular expression path = path.substr(1).replace(/(\/index\.js|\.js)$/, "")
    // console.log(path)
    return {
        path,
        component,
        meta
    }
})

7.2 Implementing the convertTree algorithm

After processing the data above, we encapsulate a method specifically for processing flattened data into tree data. The algorithm time complexity is O(n^2)

function convertTree(routes) {
    let treeArr = [];
    //1. Process the data and process the id and parent of each piece of data (commonly known as where is dad going)
    routes.forEach(route => {
        let comparePaths = route.path.substr(1).split("/")
        // console.log(comparePaths)
        if (comparePaths.length === 1) {
            //Indicates that it is a root node. The root node does not need to add parent_id
            route.id = comparePaths.join("")
        } else {
            //Description has a parent node//Process its own id first
            route.id = comparePaths.join("");
            //comparePaths except the last item is parent_id
            comparePaths.pop()
            route.parent_id = comparePaths.join("")
        }
    })
    //2. All data has found the id of the parent node, the following is the real search for the parent node routes.forEach(route => {
        //Judge whether the current route has a parent_id
        if (route.parent_id) {
            //The route with parent node //id===parent_id is the parent node of the current route let target = routes.find(v => v.id === route.parent_id);
            //Judge whether the parent node has the children attribute if (!target.children) {
                target.children = []
            }
            target.children.push(route)
        } else {
            treeArr.push(route)
        }
    })

    return treeArr
}

After the above processing, we can get the tree structure.

Next, we just need to export the data and import it into the app and pass it to the CompileRouter component.

7.3 Things to note in the future

In the future, you only need to create files in pages to automatically process and compile routes. However, for nested routes, don't forget to add the CompileRouter component to the route component. Here are the highlights:

Create a routing page
Add to the parent routing component of the nested route

8. Extending static properties

The effect we have created is there, but if we use it to render the menu, there will be a problem. There is no content to render the menu, so we can extend the static attribute meta (or other) on the component, and then make some small changes to our automatic compilation code.

Components

Complete code of automation processing logic

//require.context()

// 1. A directory to search,
// 2. A flag indicating whether to search its subdirectories as well. 
// 3. A regular expression that matches files.
let context = require.context("../pages", true, /\.js$/);

let paths = context.keys() //Get the paths of all files let routes = paths.map(path => {
    //Batch get the imported components let component = context(path).default;
    //Component extended attributes to facilitate rendering menu let meta = component['meta'] || {}
    //console.log(path)
    //The purpose of this regular expression //Because the address is ./Discover/Djradio/index.js, this type of address cannot be used directly, so it needs to be processed //1. Then remove the first "." and the result is /Discover/Djradio/index.js
    //2. After processing, it still cannot be used directly because we expect /Discover/Djradio, so we use regular expression to kill index.js //3. It is possible that the subsequent path is not a folder and the result is /Discover/abc.js. The suffix name cannot be used in the path attribute of the routing configuration, so the .js suffix name is replaced by regular expression path = path.substr(1).replace(/(\/index\.js|\.js)$/, "")
    // console.log(path)
    return {
        path,
        component,
        meta
    }
})
//This kind of data is flat data and does not conform to our routing rules //We need to do an algorithm to reduce the time complexity to o(n) as much as possible //Encapsulate a convertTree algorithm with a time complexity of o(n^2)
// console.log(routes)

//id
//parent_id

function convertTree(routes) {
    let treeArr = [];
    //1. Process the data and process the id and parent of each piece of data (commonly known as where is dad going)
    routes.forEach(route => {
        let comparePaths = route.path.substr(1).split("/")
        // console.log(comparePaths)
        if (comparePaths.length === 1) {
            //Indicates that it is a root node. The root node does not need to add parent_id
            route.id = comparePaths.join("")
        } else {
            //Description has a parent node//Process its own id first
            route.id = comparePaths.join("");
            //comparePaths except the last item is parent_id
            comparePaths.pop()
            route.parent_id = comparePaths.join("")
        }
    })
    //2. All data has found the id of the parent node, the following is the real search for the parent node routes.forEach(route => {
        //Judge whether the current route has a parent_id
        if (route.parent_id) {
            //The route with parent node //id===parent_id is the parent node of the current route let target = routes.find(v => v.id === route.parent_id);
            //Judge whether the parent node has the children attribute if (!target.children) {
                target.children = []
            }
            target.children.push(route)
        } else {
            treeArr.push(route)
        }
    })

    return treeArr
}

export default convertTree(routes)

//Get a module // console.log(p("./Discover/index.js").default)

//What is the purpose?
//Generate a routing configuration // const routes = [
// {
// path: "",
// component,
// children:[
// {path component}
// ]
// }
// ]

Final Thoughts

In fact, the above processing cannot be used in the project as an application level, mainly because the CompileRouter processing is not detailed enough. In the next issue, I will write a special article on how to handle CompileRouter for authentication and other applications in the project.

This is the end of this article about the implementation of automated routing in react. For more information about automated routing in react, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed explanation of the redirection methods of each version of React routing
react-router JS control routing jump example
React-router v4: How to use history to control route jumps
Several implementation solutions for lazy loading of React routes
Implementation of React-router4 route monitoring
Summary of React-router v4 routing configuration method
How to implement React routing authentication
Detailed explanation of how to add transition animation when switching routing pages to React-Router
Detailed explanation of routing applications above react router 4.0
Detailed explanation of two methods of asynchronously loading routes in react-router4
Implementation of nested routing in react-router-dom

<<: How to implement the paging function of MyBatis interceptor

>>: Detailed explanation of how to build an Ftp server on Ubuntu (success guaranteed)