koot-router
npm i koot-router

koot-router

Koot是基于React和Koa的WEB全栈技术解决方案。

by cmux

1.0.25 (see all)License:ISCTypeScript:Not Found
npm i koot-router
Readme

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...
});

Downloads/wk

2

GitHub Stars

61

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

14

OPEN ISSUES

62

OPEN PRs

0
VersionTagPublished
1.0.25
latest
2yrs ago
1.0.24
next
3yrs ago
No alternatives found
No tutorials found
Add a tutorial