React routes can be contracted, configured, visually edited and automatically generated

This is the second day of my participation in Gwen Challenge

First determine the business scenario

If we set the scene in the development of a PC side management background, then it is very common requirements according to different users, configure different permissions, display different menu items, render different routes.

I don’t know who’s in charge of that

Generally speaking, it is background configuration permission, and then drive the front end display menu, but I think it is not very good, add a menu to the background application, too inflexible, cost effort.

I think the foreground should also be given a degree of authority to “bypass” the rendering of menu items and routing items that the background controls.

In a word:

The front and back office work together to get things done, the back office is the main, the front office is the auxiliary.

Based on the above analysis, a solution is developed

Let’s start with a list of “characters” :

Dynamically structured data: Data is created through front – and back-office collaboration, which describes a tree-like relationship.

Static content data: Render basic data information for routes and menu items.

Menu item and its associated route: based on the above data driven display.

Static content configuration

There are mainly two members:

• Route configuration: routesMap

• Menu configuration: menusMap

  The correlation between the two is too high, so they are managed together.

Route configuration: routesMap

Function:

Each route is a single object that is centrally managed by registering routesMap internally.

Structure:

{... {name: "commonTitle_nest".// Internationalize the unit ID
        icon: "thunderbolt"./ / antd icon
        path: "/pageCenter/nestRoute".// Path rules
        exact: true.// Whether the match is strictly matched
        component: lazyImport(() = >
            import('ROUTES/login')),/ / component
        key: uuid()                             // Unique identifier}... }Copy the code

Individual parameters:

It basically extends the React-router and retains its configuration items.

Menu configuration: menusMap

Function:

Each menu item displayed on the left is a singleton object, whose singleton content is associated with the routing object and managed centrally by registering inside routesToMenuMap.

Structure:

{
    ...
     [LIGHT_ID]: {
        ...routesMap.lightHome,
        routes: [
            routesMap.lightAdd,
            routesMap.lightEdit,
            routesMap.lightDetail,
        ],
    }
    ...
}
Copy the code

Individual parameters:

This individual is mainly associated with the routing individual, so its parameters are basically consistent with it

Dynamic configuration

There are two main categories:

• Menulocalconfig. json: driver data expected by the front-end.

• Menuremoteconfig. json: Driver data expected by the backend.

Function:

Dynamic/static combination, drive display: The two files are fused as dynamic data, and static data (menusMap) is deactivated to drive display menu items and render routing components.

Emphasize:

• Menulocalconfig. json: is a component of dynamic data. It is static in “dynamic” and is configured by the front-end.

• Menuremoteconfig. json: This should be provided by the background for configuring permissions. The front end configures this data file for default Settings where no data is returned and for mock development purposes.

Structure:

{[..."menuId": 2001."parentId": 1001}... ]Copy the code

Simple, straightforward way to represent structured data sets

Dynamic configuration:

To put it simply, it is an expectation (cause) for rendering that drives menu items and routes, whether it is the back-end configuration of the front end for permission control or the front end’s desire to bypass the back-end dominant display. The two negotiate and combine to describe a structure (branching) with as little information as possible, allowing it to be supplemented by static data (yemao) and then driven by the resulting whole (result).

Quick learning

Registering route Individuals

/ SRC /routes/config.js

/* Route registration data, new route in this configuration */
export const routesMap = {
    ...
    templates: {
        name: "commonTitle_nest".icon: "thunderbolt".path: "/pageCenter/nestRoute".exact: true.redirect: "/pageCenter/light".key: uuid()
    }
    ...
}
Copy the code

For details: / Routing related/configuration/static content configuration

Determine the “appearance” of the routing individual

Same position as above, chestnut:

/* The route matches the registration data of menu, the new background driver menu is configured here */
export constmenusMap = { ... [LIGHT_ID]: { ... routesMap.lightHome,/ / "leading role"
        routes: [
            routesMap.lightAdd,         / / "supporting role"
            routesMap.lightEdit,
            routesMap.lightDetail,
        ],
    },
    ...
}
Copy the code

Solution: First, the individual route appears in the configuration, indicating the exit (drive rendering route), but there are two kinds of exit:

This completes the preparation of the static data, and it is time for the dynamically structured data class to activate it.

Configure dynamic structured data

Background configuration permissions:

[{"menuId": 1002."parentId": 0 },
  { "menuId": 1001."parentId": 0}]Copy the code

The dominant

Front-end custom permissions:

[{"menuId": 2002."parentId": 1001 },
  { "menuId": 2001."parentId": 1001 },
  { "menuId": 2003."parentId": 0 },
  { "menuId": 2004."parentId": 1002 },
  { "menuId": 2005."parentId": 1002}]Copy the code

supplement

Solution: 1*** and 2*** are the background and foreground naming conventions respectively, and it is not difficult to see from the above data that the combination of the two describes a tree relationship, which in turn activates static data to drive the menu and routing of the rendered page.

Simply put: is the dynamic data description structure, static data description content, structure and content to match, there will be a display, there will be no problem, the two with drive display.

At this point, the configuration is basically complete. You can directly modify the file for development and adjustment, or visual operation.

Configuration adjustment hard? Drag and drop!

Automatically refreshes after the operation.

Automatic file generation

menuLocalConfig.json

menuRemoteConfig.json
Copy the code

Conclusion:

React routing has been developed with a lot of strength. The overall solution has been determined for your reference.

The project address