feat: intro routes prop config keepQuery (#12228)

* feat: intro routes prop config `keepQuery` * docs: add `keepQuery` desc
umijs · Apr 11, 2024 · b9463e1 · b9463e1
1 parent 0c59059
commit b9463e1
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/docs/docs/docs/guides/routes.md b/docs/docs/docs/guides/routes.md
@@ -121,7 +121,17 @@ export default {
 }
 ```
 
-访问 `/` 会跳转到 `/list`，并由 `src/pages/list` 文件进行渲染。
+访问 `/` 会跳转到 `/list` 。
+
+重定向时，默认不会携带原 url 的查询参数，如需保持原参数，添加 `keepQuery` 选项即可：
+
+```ts
+  routes: [
+    { path: '/', redirect: '/list', keepQuery: true },
+
+    // 注：若你需在跳转时处理参数，可以自行实现一个跳转组件
+  ]
+```
 
 ### wrappers
 

diff --git a/packages/renderer-react/src/routes.tsx b/packages/renderer-react/src/routes.tsx
@@ -1,9 +1,15 @@
 // @ts-ignore
-import React, { useMemo } from 'react';
-import { generatePath, Navigate, useParams, Outlet } from 'react-router-dom';
+import React from 'react';
+import {
+  generatePath,
+  Navigate,
+  Outlet,
+  useLocation,
+  useParams,
+} from 'react-router-dom';
+import { useAppData, useRouteProps } from './appContext';
 import { RouteContext, useRouteData } from './routeContext';
 import { IClientRoute, IRoute, IRoutesById } from './types';
-import { useAppData } from './appContext';
 
 export function createClientRoutes(opts: {
   routesById: IRoutesById;
@@ -48,9 +54,16 @@ export function createClientRoutes(opts: {
 
 function NavigateWithParams(props: { to: string }) {
   const params = useParams();
+  let to = generatePath(props.to, params);
+  const routeProps = useRouteProps();
+  const location = useLocation();
+  if (routeProps?.keepQuery) {
+    const queryAndHash = location.search + location.hash;
+    to += queryAndHash;
+  }
   const propsWithParams = {
     ...props,
-    to: generatePath(props.to, params),
+    to,
   };
   return <Navigate replace={true} {...propsWithParams} />;
 }