src/routes.ts 支持配置类似 wrapper 的能力

[大果]

router.jsx里面写了一个高阶组件，包装了 Route，在高阶组件中做了是否登录检查。对于需要登录的功能组件使用这个高阶组件。

[chenbin92]

@imsobear @ClarkXia wrapper 初步设计如下，仅限配置式路由

用户代码

• 路由代码

import Home from '@/pages/Home';
import wrapperPage from './wrapperPage';

const routerConfig = [
  {
    path: '/',
    component: Home,
+   // 可能有多个，支持数组形式
+   wrappers: [wrapperPage]
  },
  {
    path: '/about',
    component: Home
  }
];

export default routerConfig;

• 自定义 HOC

import React from 'react';

const wrapperPage = (PageComponent) => {
  const WrapperedPage = (props) => {
    return <PageComponent {...props} />
  };
  return WrapperedPage;
};

export default wrapperPage;

相关实现

function parseRoutes(routes: RouteItemProps[]) {
  return routes.map((route) => {
    const { children, component, routeWrappers, ...others } = route;
+    let mergedRouteWrappers = routeWrappers;
+    if (route.wrappers && route.wrappers.length) {
+      mergedRouteWrappers = routeWrappers.concat(route.wrappers);
+    }
    const parsedRoute: IRouterConfig = { ...others };
    if (component) {
-     parsedRoute.component = getRouteComponent(component, children ? [] : routeWrappers);
+     parsedRoute.component = getRouteComponent(component, children ? [] : mergedRouteWrappers);
    }
    if (children) {
      parsedRoute.children = parseRoutes(children);
    }
    return parsedRoute;
  });
}

[chenbin92]

详见 PR：#305