UMI配置笔记

lyywz99

已于 2022-08-10 14:35:58 修改

阅读量961

点赞数

文章标签： javascript 前端开发语言 react

于 2022-08-09 19:04:06 首次发布

本文链接：https://blog.csdn.net/lyywz99/article/details/126253727

版权

umi 学习笔记

跟着千峰视频学习umi相关内容的一些笔记，第一次发，有点乱

1、umi会根据pages目录自动生成路由配置，但是需要注释umirc.js中routes相关，否则自动配置不生效

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  // routes: [
  //   { path: '/', component: '@/pages/index' },
  // ],
  fastRefresh: {}
  }
);

2、[id].tsx实现动态路由

import React from 'react'
import { useParams } from 'umi'

interface IParams{
    id:string
}

export default function Detail(props:any) {
    const params=useParams<IParams>()
    console.log(params.id)
    return (
        <div>
            detail
        </div>
    )
}

3、嵌套路由文件路径要注意

4、路由拦截:用wrapper进行包装,创建一个父组件,没有token进行拦截

export default function Auth(props: any) {
    const tokenStr = localStorage.getItem ('token')
        console.log(tokenStr)
    if(localStorage.getItem('token')){
        
        return(
            <div>
                {props.children}
            </div>
        )
    }
    return <Redirect to="/login"/>
}

5、改成hash模式在umirc.js文件中

export default{
		history:{type:'hash'}
		}

6、利用mock模拟后端来编写接口，请求数据

export default {
    namespace:"city",//命名空间
    state:{
        cityName:"北京",
        cityId:"110100"
    },
    //同步
    reducers:{
        changeCity(prevState:any,action:any){
            console.log(action)
            return{
                ...prevState,
                cityName:action.payload.cityName,
                cityId:action.payload.cityId
            }
        }
    }
}