Umi

umi

页面传参

//$id.js

import React from 'react'

export default function $id({match}){
    return (
        <div>
            {match.params.id}
        </div>
    )
}

嵌套路由

// _layout.js

import React from 'react'

export default function(){
    return (
        <div className={styles.normal}>
            <h1>这是公共部分</h1>
            <div>{props.children}</div>
        </div>
    )
}

路由器和连接

import Link from 'umi/link'
import router from 'umi/router'
//路由跳转
router.push(`/user/${u.id}`)

<Link to={`/user/${u.id}`}>路由跳转</Link>

配置路由

export default {
    //以 pages 为根目录
    routes:[
        { 
            path: '/', 
            component: './index' 
        },
        {
            path: '/users',
            component: './users/_layout',
            routes: [
                {
                    path: '/users/' ,
                    component: './users/index'
                },
                {
                    path: '/users/:id' ,
                    component: './users/$id'
                }
            ]
        },
        { 
            component: './404' 
        }
    ]
}

权限控制

export default {
    //以 pages 为根目录
    routes:[
        { 
            path: '/', 
            component: './index' 
        },
        {
            path: '/users',
            component: './users/_layout',
            Routes: ['./routes/PrivateRoute.js'] , //这里是相对根目录(非pages)的，文件名后缀不能少
            routes: [
                {
                    path: '/users/' ,
                    component: './users/index'
                },
                {
                    path: '/users/:id' ,
                    component: './users/$id'
                }
            ]
        },
        { 
            component: './404' 
        }
    ]
}

1. ./routes/PrivateRoute.js

import Redirect from 'umi/redirect';

export default props => {
    if(Math.random > 0.5){
        return <Redirect to= '/login'>
    }
    return (
        <div>
            {/*<div>PrivateRoute (routes/PrivateRoute.js)</div> */}
            {props.children}
        </div>
    )
}

and配置

 // config.js
export default {
    plugins: [
        [
            "umi-plugin-react",
            {
                antd: true,
                dva: true
            }
        ]
    ]
}

Dva

1.创建

// src/models/Index.js
function getGoods (){
    return axios.get('/api/goods')
}

export default {
    namespace: 'Index',  //model的命名空间，区分多个model
    state : [   //初始状态
        {
            title: 'web全栈'
        },
        {
            title: 'java架构师'
        }
    ],
    effects:{  // 异步操作
        *getList(action,{call, put}){
            const res = yield call(getGoods)
            yield put( { type: 'initGoods', payload: res.data.resule } ) //更新状态
        }
    },
    reducers: {  //更新状态(同步)
        addGood(state,action){
            return [...state,{ title: action.title }]
        },
        initGoods(state,action){
            return [...state,{ title: action.payload }]
        }
    }
}

2.使用

import { connect } from 'dva'
import { useEffect } from 'react'

export default connect(
        state => ({
        loading: state.loading , //dva已经可以获得 loading状态
        goodsList: state.Index  //获取指定命名空间的模型状态
    }),
    {
        addGood: title => ({
            type: 'Index/addGood', //action的type需要以命名空间为前缀+reducer名称
            title
        }),
        getList: title => ({
            type: 'Index/getList' //action的type需要以命名空间为前缀+reducer名称
      
        })
    }

)( function({ goodsList , addGood, getList, loading}){
    //loading.models.Index  表示 Index的状态
    useEffect(() => {
        return ()=>{
            getList()
        }
    },[])
    return (
        <div>
            {goodsList[0].title}
            <button onClick={()=>addGood('Python全栈')}></button>
        </div>
    )
})