diff --git a/docs/docs/docs/guides/routes.md b/docs/docs/docs/guides/routes.md index 18c1bb82fdb9..d8a8beee9252 100644 --- 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 index cea77d75e6e0..709499468b5b 100644 --- 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 ; }