路由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"}/>
}
]