fix: modify type AuthRouteObj Generics

README.md

@@ -182,9 +182,9 @@ interface LayoutProps {
   authRouters?: AuthRouteObject[];
 }
 
-const Layout:FC<LayoutProps> = ({ routers, authRouters }) => {
+const Layout:FC<LayoutProps> = ({ routers = [], authRouters = [] }) => {
    // you can use this to generate your menus
-   console.log("menuRouters", authRouters);
+   console.log("authRouters", authRouters);
    return ...
 }
 ```
@@ -193,13 +193,14 @@ If you want to config menu name and icon in the routes
 
 ```jsx
 // routers.tsx
-export type MetaAuthRouteObject = AuthRouteObject & {
+type MetaMenu = {
   name?: string,
   icon?: React.ReactNode,
-  children?: MetaAuthRouteObject[],
 };
 
-export const routers: MetaAuthRouteObject[] = [
+export type MetaMenuAuthRouteObject = AuthRouteObject<MetaMenu>;
+
+export const routers: MetaMenuAuthRouteObject[] = [
   {
     path: "/",
     element: <Layout />,
@@ -235,15 +236,15 @@ export const routers: MetaAuthRouteObject[] = [
 // Layout.tsx
 import { FC } from "react";
 import { Outlet } from "react-router-dom";
-import { MetaAuthRouteObject } from "../routers";
+import { MetaMenuAuthRouteObject } from "../routers";
 
 interface LayoutProps {
-  authRouters?: MetaAuthRouteObject[];
+  authRouters?: MetaMenuAuthRouteObject[];
 }
 
-const Layout: FC<LayoutProps> = ({ routers, authRouters }) => {
+const Layout: FC<LayoutProps> = ({ authRouters = [] }) => {
   // you can get name and icon
-  console.log("menuRouters", authRouters);
+  console.log("authRouters", authRouters);
   return ...;
 };
 

example/layout/Layout.tsx

@@ -1,16 +1,16 @@
 import { FC } from "react";
 import { Outlet } from "react-router-dom";
-import { MetaAuthRouteObject } from "../routers";
+import { MetaMenuAuthRouteObject } from "../routers";
 
 interface LayoutProps {
   // default routers
-  routers?: MetaAuthRouteObject[];
+  routers?: MetaMenuAuthRouteObject[];
   // menu routers
-  authRouters?: MetaAuthRouteObject[];
+  authRouters?: MetaMenuAuthRouteObject[];
 }
 
-const Layout: FC<LayoutProps> = ({ routers, authRouters }) => {
-  console.log("menuRouters", authRouters);
+const Layout: FC<LayoutProps> = ({ routers = [], authRouters = [] }) => {
+  console.log("authRouters", authRouters);
   return (
     <div>
       in layout

example/routers.tsx

@@ -9,13 +9,14 @@ const Login = lazy(() => import("./pages/Login"));
 const NotFound = lazy(() => import("./pages/404"));
 const Setting = lazy(() => import("./pages/Setting"));
 
-export type MetaAuthRouteObject = AuthRouteObject & {
+type MetaMenu = {
   name?: string;
   icon?: React.ReactNode;
-  children?: MetaAuthRouteObject[];
 };
 
-export const routers: MetaAuthRouteObject[] = [
+export type MetaMenuAuthRouteObject = AuthRouteObject<MetaMenu>;
+
+export const routers: MetaMenuAuthRouteObject[] = [
   {
     path: "/",
     element: <Layout />,

lib/utils.tsx

@@ -5,18 +5,28 @@ import {
   Outlet,
 } from "react-router-dom";
 
-export interface AuthIndexRouteObject extends IndexRouteObject {
-  auth?: string | string[];
-}
+export type AuthIndexRouteObject<T extends Record<string, any> = any> =
+  IndexRouteObject & {
+    auth?: string | string[];
+  } & {
+    [P in keyof T]: T[P];
+  };
 
-export interface AuthNonIndexRouteObject extends NonIndexRouteObject {
+export type AuthNonIndexRouteObject<T extends Record<string, any> = any> = Omit<
+  NonIndexRouteObject,
+  "children"
+> & {
+  [P in keyof T]: T[P];
+} & {
   auth?: string | string[];
-  children?: AuthRouteObject[];
+  children?: AuthRouteObject<T>[];
   genRoutersProp?: boolean;
   genAuthRoutersProp?: boolean;
-}
+};
 
-export type AuthRouteObject = AuthIndexRouteObject | AuthNonIndexRouteObject;
+export type AuthRouteObject<T extends Record<string, any> = any> =
+  | AuthIndexRouteObject<T>
+  | AuthNonIndexRouteObject<T>;
 
 export interface getAuthRoutersOptions {
   routers: AuthRouteObject[];