feat: 完成 * 的params 以数组形式返回

Author: Ohh-889

src/features/router/useRoute.ts

@@ -12,8 +12,34 @@ function usePrevious<T>(value: T): T | null {
   return ref.current;
 }
 
+function getCatchAllParam(str: string | undefined) {
+  if (!str) return null;
+  // \[\.\.\.(\w+)\] 用来匹配形如 [...slug]
+  // (\w+) 意味着捕获“字母、数字或下划线”组成的部分
+  const match = str.match(/\[\.\.\.(\w+)\]/);
+  return match ? match[1] : null;
+}
+
+function getParams(
+  params: Record<string, string> | undefined,
+  id: string
+): Record<string, string | string[]> | undefined {
+  if (!params?.['*']) return params;
+
+  const lastName = id.split('_').at(-1);
+  const catchAllParam = getCatchAllParam(lastName);
+  if (catchAllParam) {
+    return { [catchAllParam]: params['*'].split('/') };
+  }
+  return params;
+}
+
 /** - get route meta */
-export function useRoute<T = unknown, Q extends Record<string, string> = Record<string, string>>() {
+export function useRoute<
+  T = unknown,
+  Q extends Record<string, string> | null = Record<string, string>,
+  P extends Record<string, string | string[]> = Record<string, string | string[]>
+>() {
   const matches = useMatches();
 
   const routes = matches.at(-1) as Router.Route<T>;
@@ -32,11 +58,12 @@ export function useRoute<T = unknown, Q extends Record<string, string> = Record<
     fullPath,
     hash,
     matched: matches.slice(1) as Router.Route<T>[],
+    params: getParams(routes.params as Record<string, string>, routes.id) as P,
     pathname,
     query,
     redirect: null,
     search
-  } as Router.Route<T, Q>;
+  } as Router.Route<T, Q, P>;
 
   const previousRoute = usePrevious(route);
 

src/types/app.d.ts

@@ -614,7 +614,10 @@ declare namespace App {
           refreshToken: string;
           tokenExpired: string;
         };
-        route: Record<I18nRouteKey, string>;
+        route: Record<I18nRouteKey, string> & {
+          notFound: string;
+          root: string;
+        };
         system: {
           errorReason: string;
           reload: string;

src/types/elegant-router.d.ts

@@ -43,6 +43,7 @@ declare module "@soybean-react/vite-plugin-react-router" {
     "(base)_home": "/home";
     "(base)_manage": "/manage";
     "(base)_manage_role": "/manage/role";
+    "(base)_manage_role_[...slug]": "/manage/role/*";
     "(base)_manage_user": "/manage/user";
     "(base)_manage_user_[id]": "/manage/user/:id";
     "(base)_multi-menu": "/multi-menu";
@@ -146,6 +147,7 @@ declare module "@soybean-react/vite-plugin-react-router" {
     | "(base)_home"
     | "(base)"
     | "(base)_manage"
+    | "(base)_manage_role_[...slug]"
     | "(base)_manage_role"
     | "(base)_manage_user_[id]"
     | "(base)_manage_user"

src/types/router.d.ts

@@ -74,11 +74,16 @@ declare namespace Router {
     url?: string | null;
   };
 
-  type Route<T = unknown, Q extends Record<string, string> = Record<string, string>> = UIMatch<T, RouteHandle> & {
+  type Route<
+    T = unknown,
+    Q extends Record<string, string> | null = Record<string, string>,
+    P extends Record<string, string | string[]> = Record<string, string | string[]>
+  > = Omit<UIMatch<T, RouteHandle>, 'params'> & {
     error: Error | null;
     fullPath: string;
     hash: string;
     matched: UIMatch<T, RouteHandle>[];
+    params: P;
     pathname: string;
     query: Q;
     redirect: Route<T, Q> | null;