8.18 笔记

umi路由

umijs如果项目配置的不是很复杂，那么推荐在.umirc.ts中写配置，如果复杂，可以在config/config.ts里面写，并且可以将路由之类的单独配置

jsx

export default {
  routes: [
    { 
   // 严格模式，必须保证location和path完全对应
   exact: true,
   path: '/', 
   title:'首页',
   component: 'index' 
  },
    { 
   exact: true, 
   title:'用户',
   path: '/user', 
   component: 'user' 
  },
  ],
}

常见api：

title:页面标题
exact:开启严格模式，必须保证location和path完全一致
path：url路径
component:：组件
routes：配置子路由
wrappers：配置路由的高阶组件，可以用于路由级别的权限校验(具体参见umi官网)

参考链接：

路由

UmiJS 3.X实战从头开始（三）：配置与运行时配置

Umi 常用配置教科书级（一） - 掘金

watermark水印

jsx

// 增加水印
export function rootContainer(container: any) {
  const options = {
    text: [
      getCurrentUserInfo()?.userName
        ? "\n" +
          getCurrentUserInfo()?.userName +
          "-" +
          getCurrentUserInfo()?.userAccount
        : "",
      "基础架构web",
    ],
    width: 120,
    height: 64,
    gapX: 300,
    gapY: 150,
    zIndex: 999,
    monitor: true,
  };
  // 
  const Provider = (props: any) => {
    // 这边的props就是根组件
    console.log("根组件", props);
    const {
      children,
      // routes = []
    } = props;
    const newChildren = React.cloneElement(children, {
      ...children.props,
      // routes,//开启权限菜单解开
    });
    // 上面的代码是为了将根组件的props传递给子组件

    return (
      <Watermark {...options}>
        <div
          style={{
            minHeight: "100vh",
          }}
        >
          {newChildren}
        </div>
      </Watermark>
    );
  };
  return React.createElement(Provider, null, container);
}