react + antiDesign开发中遇到的问题记录

react + antiDesign开发中遇到的问题记录

一：页面中子路由失效:

antiDesign的官方实例中，会把路由重复的地方给去重，而且路由匹配模式不是严格模式。所以我们需要在util.js修改两个地方

1：把路由匹配模式改为严格：

export function getRoutes(path, routerData) {
  let routes = Object.keys(routerData).filter(routePath =>
    routePath.indexOf(path) === 0 && routePath !== path);
  // Replace path to '' eg. path='user' /user/name => name
  routes = routes.map(item => item.replace(path, ''));
  // Get the route to be rendered to remove the deep rendering
  const renderArr = getRenderArr(routes);
  // Conversion and stitching parameters
  const renderRoutes = renderArr.map((item) => {
    // const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);
    return {
      ...routerData[`${path}${item}`],
      key: `${path}${item}`,
      path: `${path}${item}`,
      exact: true,
    };
  });
  return renderRoutes;
}

2:修改路由去重

function getRenderArr(routes) {
  const renderArr = [];
  renderArr.push(routes[0]);
  /** *去掉重复判断，满足/user,/user/detail类似URL的情况 */
  // for (let i = 1; i < routes.length; i += 1) {
  //   let isAdd = false;
  //   // 是否包含
  //   isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
  //   // 去重
  //   renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
  //   if (isAdd) {
  //     renderArr.push(routes[i]);
  //   }
  // }
  for (let i = 1; i < routes.length; i += 1) {
    renderArr.push(routes[i]);
  }
  return renderArr;
}