A brief analysis of the implementation of React routing encapsulation

Understand the concepts of SAP and routing

SAP (single page web application) means a single page web application. As the preface says, generally speaking, if the functions are more complex, they will involve the function of page jumping. Traditional front-end page jumping is often used to jump using the <a/> tag. Although this method can implement functions, each time you jump to a new page, the elements of the page will be loaded again, which is actually not very friendly to users. Single-page Web applications solve this problem better because the entire SAP application is carried out on one page, and each page jump only involves the update operation of the corresponding components (modules) in the page, which to a certain extent prevents the page from loading duplicate page elements.

Let's talk about routing

Routing can actually be understood as a mapping relationship, that is, the correspondence between paths and components or functions. For example, the /home path corresponds to the home page component of Home. In React, there is an official maintained component library of react-router-dom to help us deal with routing problems in the project. It should be noted that the react project we created with create-react-dom has no react-router-dom by default, so we need to download it to the project ourselves.

Routing encapsulation process

• Encapsulated routing file component, encapsulated operations of first-level routing, separate routing files are extracted from separate files
• Create a new router folder in src, create a new file in the folder, and migrate the routing configuration file over
• Create a new mapRouter file in the router folder, convert the routing configuration into an array object format, refer to Vue configuration
• Just loop the Route component, and the secondary routing configuration can be temporarily configured in the parent component.

Note: The name of the folder and the name of the file can be defined at will, without following the above process completely

import { default as React } from 'react';
import ReactDOM from 'react-dom/client';
import './';
import reportWebVitals from './reportWebVitals';
import {Routes} from '../src//router/index'
const root = (('root'));
(
  <Routes/>
);
reportWebVitals();

router/

//router/fileimport { HashRouter as Router, Route, Switch } from "react-router-dom"
import routes from './mapRoute';
//The defined routing function is directly mounted to the main pageconst Routes = function () {
    (routes);
    return (
      <Router>
        <Switch>
          {
            ((item,index)=>{
                return (
                    <Route key={index} path={} component={}></Route>
                )
            })
          }
        </Switch>
      </Router>
    )
  }
export default Routes;

HashRouter as Router, this is an alias for HashRouter, you can not write it

router/routing configuration file

import App from '../App';
import Detail from '../detail';
import Layout from "../admin/layout"
import About from '../pages/About';
const routes = [
    {
        path:"/about",
        title:"About",
        component:About,
    },
    {
        path:"/admin",
        title:"Management Backend",
        component:Layout,
        exact:false,
    },{
        path:"/detail/:id",
        title:"detail",
        component:Detail,
    },{
        path:"/",
        title:"App",
        component:App,
    }
]
export default routes;

In this way, the route in our react is encapsulated. Its principle is to encapsulate the route into a file just like the route in vue, and then we can add the route directly to it. The difference is that there is a children attribute in vue to define the secondary route, but there is no react in it.

We introduce routes in this js file and then render loops in the index file, which also reduces the amount of our code

However, it should be noted that we cannot use secondary routing in react routing encapsulation. This is a disadvantage. We can define secondary routing in the parent component.

This is the end of this article about the implementation of React routing encapsulation. For more related React routing encapsulation content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!