koot-router

    1.0.25 • Public • Published

    koot-router

    概念

    路由器的概念

    链接两个或多个设备。

    前端路由器

    应该是页面组件的组织者,用于连接两个/或多个组件。

    koot-router

    是基于 react-router纯json的路由组织方式,以一份通用且易理解的 json 格式来描述路由及组件相关的关系。

    安装

    NPM

        npm install koot-router --save

    Yarn

        yarn koot-router

    使用

    如果使用了 koot-boilerplate(基础模板),请替换/src/routes/index.js 为下面的文件

    File:index.js

    import kootRouter from 'koot-router';
    import routerConfig from './config.js';
     
    const router = new kootRouter(routerConfig);
     
    router.beforeEach((nextState, replace, callback) => {
        // do...
        callback();
    });
     
    export default router.reactRouter;

    同级目录中添加路由配置文件

    File:config.js

    // UI 组件以实际使用修改
    import AppView from '@views/app.view.jsx';
    import DefaultView from '@views/default.view.jsx';
    import OtherView from '@views/other.view.jsx';
     
    export default {
        path: '/',
        component: AppView,
        redirect: '/other',
        // 建议:把页面相关信息配置在meta对象里,
        //      或者一些自定义数据放在meta里,
        //      在组件的this.props.router.meta中获取
        meta: {
            title: '首页',
            icon: '' // 支持 () => return JSX,
        },
        children: [
            {
                // path: '',表示默认匹配的路由
                // eg: www.domain.com/ 配到这里
                path: '',
                component: DefaultView
            },
            {
                // eg: www.domain.com/other 配到这里
                path: 'other',
                component: OtherView
            },
            {
                path: 'more',
                component: MoreComponent,
                // 如果还有子路由可添加children属性,继续配置
                children: [
                    {
                        path: 'child',
                        component: ChildComponent
                    }
                ]
            }
        ]
    };

    路由配置文件说明

    即上面提到的 File:config.js

    component

    配置路由对应的组件,举例:

    // 1. 加载“不分包”的组件。
    {
        component: require('@views/home').default)
    }
    // 2. 加载“分包”的组件
    {
        component: (nextState, cb) => {
            require.ensure(
                [],
                require => {
                    if (routeCheck(nextState))
                        cb(null, require('@views/home').default);
                },
                'page-home'
            );
        };
    }

    可以直接指定要渲染的组件或者 webpack 的异步加载函数,而无需区分 component/getComponent。

    redirect

    可以直接指向你要重定向的完整路径,当匹配到你所定义的 redirect 层时,会发生重定向动作

    meta

    为自定义属性,建议一些自定义的扩展路由的相关数据放在 meta 内。

    children

    子路由,你可以在子路由配置 path = '' 的对象,来取代原来的 indexRouter,从而明确了路由该有的上下级关系。

    全局钩子函数

    beforeEach

    • 在每次路由渲染之前执行
    • nextState 即将进入的路由状态信息
    • replace 等同 react-router onEnter 的 replace , 你可以在 callback 之前进行重定向
    • callback 继续渲染的回调函数,想要页面继续渲染,你必须执行 callback 回调函数
    router.beforeEach((nextState, replace, callback) => {
        // do...
        callback();
    });

    afterEach

    • 在每次路由渲染之后执行;
    • 只会接受当前渲染完成的路由状态
    router.afterEach(state => {
        // do...
    });

    onUpdate

    • 每次路由更新时执行
    • 只会接受当前渲染完成的路由状态
    router.onUpdate(state => {
        // do...
    });

    Keywords

    none

    Install

    npm i koot-router

    DownloadsWeekly Downloads

    2

    Version

    1.0.25

    License

    ISC

    Unpacked Size

    12 kB

    Total Files

    5

    Last publish

    Collaborators

    • zrain