AntdPro和umi踩坑问题日记

这几天使用 antdpro 框架尝试进行快速开发，其中遇到了不少问题，现记录一下

---

2020 年 2 月 25 日

做路由跳转的时候发现，一级路由正常，但是切换到 2 级路由就会出现 地址更新页面没有跳转。

解决方法：在父层路由所调用的组件中一定要包括router-link管道，

框架不停提示各种各样的 error。

解决方法：修改.eslintrc.js文件
比如默认函数名后一定要空一个空格，但是这和编辑器逻辑是相悖的，所有我们可以把他关掉：rules下"space-before-function-paren": 0, // 去除函数括号前的空格

---

2020 年 2 月 27 日

react 父子组件传值中，prop.children可实现类似 vue 中 slot 插槽的用法

默认 umi 开启了配置式路由，这个时候如果要用约定式路由可以去.umirc.ts中将route项注释或删除

面包屑配置文件，直接在相应的组件里引入调用即可

import React from "react";
import { Link } from "react-router-dom";
import styles from "./index.css";
import withBreadcrumbs from "react-router-breadcrumbs-hoc";

// 路由表重命名
const routes = [
  { path: "/", breadcrumb: "首页" },
  { path: "/project", breadcrumb: "投票管理" },
  { path: "/about", breadcrumb: "关于我们" },
];

// 面包屑
const Breadcrumbs = ({ breadcrumbs }: any) => (
  <div className={styles.breadcrumb}>
    {breadcrumbs.map(({ breadcrumb, match }: any, index: number) => (
      <div className="bc" key={match.url}>
        {console.log(breadcrumb)}
        <Link to={match.url || ""}>
          // 遍历，当路由在上方路由表中存在的时候，返回面包屑显示的名称
          {routes.map((route) => route.path == match.url && route.breadcrumb)}
        </Link>
        {index < breadcrumbs.length - 1 && "　>　"} // 使用的全角空格
      </div>
    ))}
  </div>
);

export default withBreadcrumbs()(Breadcrumbs);

---