ux-autoroute

自动路由配套路由组件, 在线 demo, demo源码

React, hook, 函数组件

配套自动化路由，解析自动化路由所生成的路由映射表

在pages的根目录下会有顶级路由/，由此开始依次递归子集路由， demo中/只作为引导，取index.tsx部分片段：

const Index = () => {
    return (
        <RouterView />
    )
}
export default React.memo(Index, () => true);

可以看到，代码块中的<RouterView/>为子集路由的映射。

---

在该项目中的所有路由都采用配置的方式呈现，所以，在每个路由index.tsx的同级 目录下创建一个route.config就可以配置该路由的属性。
route.config是JSON文件。路由配置规则如下：

{
    "noLazy":true,    
    "default":true,
    "meta":{
        "name":"'主页'"
    }
} 

当noLazy为true时，该路由为非动态路由，建议在/、/main这种根路由下使用该规则。
如果不使用该规则，那么在子集路由渲染页面时，会因为匹配到自身的动态引入导致页面的重新渲染。 其结果往往是我们不希望看到的。
default被应用在父级路由引导子集路由时的默认路由，如顶级路由/只是一个空白的页面， 那么此时我们就需要将/login或者/main的default开启。
如此一来，我们在渲染/顶级路由时，就会访问默认路由，去加载login->index.tsx或main->index.tsx。

我们在路由中可以使用useRoute来取到meta的值和当前路由的子路由列表

const Main = () => {
    const { meta, routes } = useRoute();
    return (
        <>
            {meta?.name}
            <ul>
                {routes.map((item, index) => (
                    <li key={index}>
                        <NavLink to={item.path}>{item.meta?.name}</NavLink>
                    </li>
                ))}
            </ul>

            <div>
                <RouterView />
            </div>
        </>
    );
};

除了上述的路由管理，我们可能还会遇到一些与业务紧密耦合复用性不高的组件，推荐在当前的路由目录下 新建__Component目录，来存放当前路由所依赖的业务组件。

在demo中，我们还对角色访问权限做了一个小的样例，它是在Routers组件的before属性中完成的。

Routers：

/**
 * routers 路由映射表对象
 * noMatch 404
 * before 访问路有前触发，如果结果返回了JSX对象的话则替换默认的路由组件
 * after 路由组件生成后触发
 */
interface RouterParams {
    routers: Array<RouteParams>;
    noMatch?: () => ReactElement | JSX.Element;
    before?: (location: Location) => void | JSX.Element | ReactElement;
    after?: (location: Location) => void;
}

所生成的路由映射表router.ts:

import Page from './pages/index';
import PageMain from './pages/main/index';
import PageMainTomato from './pages/main/tomato/index';
import loadable from '@loadable/component';

const router=[
    {
        config: {
            meta: {
                name: '根'
            },
            noLazy: true
        },
        component: Page,
        path: '',
        child: [
            {
                config: {
                    default: true,
                    meta: {
                        name: '登录'
                    }
                },
                component: loadable(function(){return import('./pages/login')}),
                path: '/login',
                child: null
            },
            {
                config: {
                    meta: {
                        name: '首页'
                    },
                    noLazy: true
                },
                component: PageMain,
                path: '/main',
                child: [
                    {
                        config: {
                            meta: {
                                name: '土豆'
                            }
                        },
                        component: loadable(function(){return import('./pages/main/potato')}),
                        path: '/main/potato',
                        child: null
                    },
                    {
                        config: {
                            meta: {
                                name: '西红柿'
                            },
                            noLazy: true
                        },
                        component: PageMainTomato,
                        path: '/main/tomato',
                        child: null
                    }
                ]
            }
        ]
    }
]

export default router

---

注意：ux-autoroute-plugin仅仅只负责生成路由映射表，该组件才是对路由映射表规则的实现，同理你也可以写自己的规则。