dva与create-react-app的结合使用

 1 import dva from "dva";
 2 import App from "./App"
 3 
 4 //注意这种引入方式已经报销  在控制台会报警告
 5 // import createHistory from ‘history/createBrowserHistory‘;
 6 
 7 //这种为history路由展示方式
 8 //const createHistory=require("history").createBrowserHistory
 9 
10 //这种为hash路由展示方式
11 const createHistory=require("history").createHashHistory
12 
13 //下面是两种注入方式
14 const app = dva({
15   history: createHistory(),
16 });
17 
18 //const app=dva(createHistory);
19 
20 app.router(App)
21 
22 app.start(‘#root‘);

 1 import React,{Suspense} from ‘react‘
 2 
 3 import {Router} from "dva/router"
 4 
 5 import RouteView from "./routes/RouteView"
 6 import RouteConfig from "./routes/RouteConfig"
 7 
 8 //注意这里一定要注入history不然页面展示不出来  而且是结构出来的history
 9 function App({history}){
10     return <Router history={history}>
11         <Suspense fallback={<div>loading...</div>}>
12         <RouteView children={RouteConfig}></RouteView>
13         </Suspense>
14         
15     </Router>
16 }
17 
18 export default App

 1 import React, { Component } from ‘react‘
 2 
 3 import {Switch,Redirect,Route} from "dva/router"
 4 
 5 export default class RouteView extends Component {
 6     render() {
 7         return (
 8             <Switch>
 9                 {this.props.children.map((item,index)=>{
10                     if(item.redirect){
11                         return <Redirect key={index} from={item.path} to={item.redirect}></Redirect>
12                     }else{
13                         return <Route key={index} path={item.path} render={(props)=>{
14                                 return <item.component children={item.children} {...props}></item.component>
15                         }}></Route>
16                     }
17                 })}
18             </Switch>
19         )
20     }
21 }

 1 /*
 2  * @Author: chenqiang 
 3  * @Date: 2019-08-16 10:59:42 
 4  * @Last Modified by: chenqiang
 5  * @Last Modified time: 2019-08-17 20:19:41
 6  * 路由配置表
 7  */
 8 import React from "react";
 9 const RouteConfig=[
10     {
11         path:"/main",
12         component:React.lazy(()=>import("@/views/main/index.jsx")),
13         children:[
14            {
15                path:"/main/home",
16                component:React.lazy(()=>import("@/views/main/home/index.jsx"))
17            },{
18                path:"/main",
19                redirect: "/main/home"
20            }
21         ]
22     }, {
23         path:"/login",
24         component:React.lazy(()=>import("@/views/login/index.jsx"))
25     },{
26         path:"/register",
27        component:React.lazy(()=>import("@/views/register/index.jsx"))
28     },{
29         path:"/",
30         redirect:"/main"
31     }
32 ]
33 
34 export default RouteConfig;

 1 {
 2     "presets": [
 3         "react-app"
 4     ],
 5     "plugins": [
 6         [
 7             "import",
 8             {
 9                 "libraryName": "antd",
10                 "libraryDirectory": "es",
11                 "style": "css" // `style: true` 会加载 less 文件
12             }
13         ]
14     ]
15 }