路由配置

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

参数

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

路由生成方式

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="/"路由下的子集路由集合。

1import { KktproPageProps } from '@kkt/pro';
2
3const Page = (props: KktproPageProps) => {
4  const { navigate, roles = [], routes = [] } = props;
5
6  return <div />
7};
8export default Page;

页面跳转

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

1import { KktproPageProps, useNavigate } from '@kkt/pro';
2
3const Page = (props: KktproPageProps) => {
4  const { navigate } = props;
5  // const navigate = useNavigate();
6
7  const click = () => {
8    navigate('/demo');
9  };
10
11  return <button onClick={click}>navigate</button>
12};
13export default Page;

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

1// 路由加载文件 src/pages/about/index.tsx
2const Index = ()=>{
3  return <div>导出element</div>
4}
5export default Index;
6export const element = <Index />;
7export const loader = ()=>{}
8export const action = ()=>{}
9const ErrorElement = ()=><div>errorElement</div>
10export const errorElement =<ErrorElement />
11export const lazy=()=>import("@/about")
12export const path="/about"
13export const shouldRevalidate=({ currentUrl }) => {
14  // only revalidate if the submission originates from
15  // the `/meal-plans/new` route.
16  return currentUrl.pathname === "/meal-plans/new";
17}
18

kktp配置文件

1// .kktprc.ts
2export default {
3  // ...
4  initRoutes:{
5    outletLayout:"@/layout" // 自动生成路由layout布局组件地址
6  },
7}

Contributors

License

Licensed under the MIT License.