一、Css样式隔离
- Umi脚手架自带Less+Css Modules 实现样式隔离。
- 原理:基于less中的className生成唯一Hash串。
- 类似Scoped,一个基于标签(v-xx),一个基于className。
- 推荐写法
// less
.wrap-box {
background: pink;
.cont-text-box{
border:1px solid #ccc;
padding: 4px;
.cont-text{
font-size: 16px;
color: #2b2b2b;
}
}
}
// Component
import styles from './index.less';
export default function TestCompoent() {
return (
<div className={styles['wrap-box']}>
<div className={styles['cont-text-box']}>
<div className={styles['cont-text']}>这是一段描述文字!</div>
</div>
</div>
);
}
原理
{
"wrap-box":"wrap-box___3XsTJ",
"cont-text-box":"cont-text-box___2ScBT",
"cont-text":"cont-text___3comu
}
二、路由配置
- 官方路由配置文档
- 路由配置文件 => /.umirc.ts,可以抽离为单独配置文件。
- 类似VueRouter配置方式,避免频繁操作ReactRouterDom。
// 配置案例
[
{ exact: true, path: '/index', component: './Index/index' },
{
path: '/user',
component: './User/index',
routes: [{ path: '/user/detail', component: './UserDetail/index' }],
},
{ exact: true, path: '/', redirect: '/index' },
]
- component参数为字符串,Umi会做自动导入。
-
- exact 严格匹配
- routes 子路由
- redirect 重定向
- …
- wrappers 可以结合hooks实现路由拦截。
三、子路由配置
- 子路配置与VueRouter相同,通过将子路由组件注入到当前组件的
props.children
实现。 - 官方推荐使用layout组件控制路由渲染,也可以采用类似
router-view
的方式。 - 通过注入的
props.route
可以获得当前的路由信息。 - 注意子路由也为’路径全匹配’,上级路由不可省略,如案例中的’/user’。
案例
// 子路由渲染案例
import styles from './index.less';
export default function TestCompoent(props: any) {
return (
<div className={styles['wrap-box']}>
<div className={styles['cont-text-box']}>
<div className={styles['cont-text']}>这是一段描述文字!</div>
</div>
{/* 子路由渲染 */}
<div className={styles['router-view-box']}>{props.children}</div>
</div>
);
}
四、路由对象
import { history, useLocation } from 'umi';
import React from 'react';
const Index = ({ route,location }) => {
// 路由跳转操作
history.push('/');
// 参数获取
const locationHooks = useLocation();
// route对象
console.log(route);
// location对象
console.log(location);
return ( <div>Demo</div> );
}
export default Index;
五、页面keep-alive
安装插件:npm i umi-plugin-keep-alive --save
import { KeepAlive, history } from 'umi';
import PageComponen from './PageComponent';
export default (props) => {
return (
<KeepAlive
id={history.location.pathname} // 根据参数去缓存,如果参数不同就缓存多份,如果参数相同就使用同一个缓存。这样解决了传参改变时,页面不刷新的问题
when={() => {
return history.action !== 'POP'; //true卸载时缓存,false卸载时不缓存
}}
>
{/* 页面组件 注意透传props */}
<PageComponen {...props} />
</KeepAlive>
);
};