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

路由js文件

import {Navigate} from "react-router-dom"
import About from "../Pages/About";
import Home from "../Pages/Home";
import Test from "../Pages/Test";
 
 const routers = [
    {
        path:'/about',
        element:<About/>
    },
     {
         path: '/home',
         element: <Home/>,
          //配置子路由
         children:[
             {
                 path:'test',
                 element:<Test/>
             }
         ]
     },
     {
         path: "/",
         element:<Navigate to="/home"/>
     }
]
 
export default routers

在App.js文件中引入routes

import React, {Component} from 'react';
import {Route, Routes} from "react-router-dom";
import routes from "./config/routes";
class App extends Component {
    render() {
        return (
            <div>
                <Routes>
                    {
                        routes.map((routeObj)=>{
                            // return <Route key={"index"} path={routeObj.path} element={routeObj.element}/>
                            return <Route key={routeObj.path} {...routeObj}/>
                        })
                    }
                </Routes>
            </div>
        );
    }
}

export default App;

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

saveUserInfo = (dataType) => {
        return (value) => {
            const phone =/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
            const code =/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/

            if (value==="phone" && phone.test(value)){
                this.setState({[dataType]: value})
            }else if (value==="code" && code.test(value)){
                this.setState({[dataType]: value})
            }else {
                this.setState({[dataType]: ''})
            }
            this.setState({[dataType]: value})
        }
    }

路由懒加载

import React,{lazy,Suspense} from "react";
import {Navigate} from "react-router-dom"
const lazyLoading = (path) =>{
    const Comp = lazy(()=>import(`../pages/${path}`))
    return (
        <Suspense>
            <Comp/>
        </Suspense>
    )
}
const routers = [
    {
        path:'/surveyEvaluationForm',
        element:lazyLoading("SurveyEvaluationForm")
    },
    {
        path:'/',
        element:<Navigate to={"/surveyEvaluationForm"}/>
    }
]