[React类式组件路由配置]React类式组件路由配置

路由js文件

1.  
   import {Navigate} from "react-router-dom"
2.  
   import About from "../Pages/About";
3.  
   import Home from "../Pages/Home";
4.  
   import Test from "../Pages/Test";
5.  
    
6.  
   const routers = [
7.  
   {
8.  
   path:'/about',
9.  
   element:<About/>
10.  
    },
11.  
    {
12.  
    path: '/home',
13.  
    element: <Home/>,
14.  
    //配置子路由
15.  
    children:[
16.  
    {
17.  
    path:'test',
18.  
    element:<Test/>
19.  
    }
20.  
    ]
21.  
    },
22.  
    {
23.  
    path: "/",
24.  
    element:<Navigate to="/home"/>
25.  
    }
26.  
    ]
27.  
     
28.  
    export default routers

在App.js文件中引入routes

1.  
   import React, {Component} from 'react';
2.  
   import {Route, Routes} from "react-router-dom";
3.  
   import routes from "./config/routes";
4.  
   class App extends Component {
5.  
   render() {
6.  
   return (
7.  
   <div>
8.  
   <Routes>
9.  
   {
10.  
    routes.map((routeObj)=>{
11.  
    // return <Route key={"index"} path={routeObj.path} element={routeObj.element}/>
12.  
    return <Route key={routeObj.path} {...routeObj}/>
13.  
    })
14.  
    }
15.  
    </Routes>
16.  
    </div>
17.  
    );
18.  
    }
19.  
    }
20.  
     
21.  
    export default App;

正则表达式校验，onChange更新state

1.  
   saveUserInfo = (dataType) => {
2.  
   return (value) => {
3.  
   const phone =/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
4.  
   const code =/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
5.  
    
6.  
   if (value==="phone" && phone.test(value)){
7.  
   this.setState({[dataType]: value})
8.  
   }else if (value==="code" && code.test(value)){
9.  
   this.setState({[dataType]: value})
10.  
    }else {
11.  
    this.setState({[dataType]: ''})
12.  
    }
13.  
    this.setState({[dataType]: value})
14.  
    }
15.  
    }

路由懒加载

1.  
   import React,{lazy,Suspense} from "react";
2.  
   import {Navigate} from "react-router-dom"
3.  
   const lazyLoading = (path) =>{
4.  
   const Comp = lazy(()=>import(`../pages/${path}`))
5.  
   return (
6.  
   <Suspense>
7.  
   <Comp/>
8.  
   </Suspense>
9.  
   )
10.  
    }
11.  
    const routers = [
12.  
    {
13.  
    path:'/surveyEvaluationForm',
14.  
    element:lazyLoading("SurveyEvaluationForm")
15.  
    },
16.  
    {
17.  
    path:'/',
18.  
    element:<Navigate to={"/surveyEvaluationForm"}/>
19.  
    }
20.  
    ]

这篇好文章是转载于：学新通技术网