@kkt/plugin-pro-router

路由配置

kktp内置插件，用于自动进行生成路由配置。使用此插件需要安装react-router和react-router-dom依赖包

参数

export interface RouterPluginProps {
  /**处理图标菜单中图标引入问题*/
  analysisRoutersIcon?: (icons: { name: string; newName: string }[]) => string;
  /**
   * @description 在src目录下生成的临时文件夹名称
   * @default .kktp
   * */
  cacheDirName?: string;
  /**
   * @description 路由类型
   * @default "hash"
   */
  routesType?: 'browser' | 'hash' | 'memory';
  /** 路由权限名称，默认查找src目录下access.[js | ts]文件 */
  accessDirName?: string;
  /**页面加载loading组件地址*/
  fallbackElement?: string;
  /**路由外层包裹组件，可以用于自定义添加路由**/
  routesOutletElement?: string;
  /**自动生成路由配置*/
  autoRoutes?: boolean;
  /**自动生成路由layout布局组件地址*/
  outletLayout?: string;
}

路由生成方式

1. 通过配置进行生成路由

• 约定根目录下config/routes.(json|js|ts)为路由菜单配置

2. 自动生成路由

• 约定src/pages文件夹为根据生成路由
• 约定src/pages/index.(js|jsx|tsx)文件为默认路由
• 约定src/pages/**/index.(js|jsx|tsx)文件为对应路由展示页面

页面参数

在kktp中，页面内置了roles、navigate、routes。

• roles 页面权限，config/routes.json菜单上配置了 roles，则在页面上获取。

• navigate 跳转。

• routes 路由path="/"路由下的子集路由集合。

import { KktproPageProps } from '@kkt/pro';

const Page = (props: KktproPageProps) => {
  const { navigate, roles = [], routes = [] } = props;

  return <div />
};
export default Page;

页面跳转

页面中可直接通过 navigate 跳转， 或者通过react-router-dom提供的 useNavigate来跳转。

import { KktproPageProps, useNavigate } from '@kkt/pro';

const Page = (props: KktproPageProps) => {
  const { navigate } = props;
  // const navigate = useNavigate();

  const click = () => {
    navigate('/demo');
  };

  return <button onClick={click}>navigate</button>
};
export default Page;

支持页面导出react-router 6配置参数

// 路由加载文件 src/pages/about/index.tsx
const Index = ()=>{
  return <div>导出element</div>
}
export default Index;
export const element = <Index />;
export const loader = ()=>{}
export const action = ()=>{}
const ErrorElement = ()=><div>errorElement</div>
export const errorElement =<ErrorElement />
export const lazy=()=>import("@/about")
export const path="/about"
export const shouldRevalidate=({ currentUrl }) => {
  // only revalidate if the submission originates from
  // the `/meal-plans/new` route.
  return currentUrl.pathname === "/meal-plans/new";
}

kktp配置文件

// .kktprc.ts
export default {
  // ...
  initRoutes:{
    outletLayout:"@/layout" // 自动生成路由layout布局组件地址
  },
}

Contributors

License

Licensed under the MIT License.