diff --git a/packages/toolpad-core/src/nextjs/NextAppProviderApp.tsx b/packages/toolpad-core/src/nextjs/NextAppProviderApp.tsx index bbe20f661c3..0f64d3a976d 100644 --- a/packages/toolpad-core/src/nextjs/NextAppProviderApp.tsx +++ b/packages/toolpad-core/src/nextjs/NextAppProviderApp.tsx @@ -1,9 +1,14 @@ import * as React from 'react'; -import Link from 'next/link'; +import NextLink from 'next/link'; import { usePathname, useSearchParams, useRouter } from 'next/navigation'; +import { LinkProps } from '../shared/Link'; import { AppProvider } from '../AppProvider'; import type { AppProviderProps, Navigate, Router } from '../AppProvider'; +const Link = React.forwardRef((props, ref) => { + const { href, history, ...rest } = props; + return ; +}); /** * @ignore - internal component. */ diff --git a/packages/toolpad-core/src/nextjs/NextAppProviderPages.tsx b/packages/toolpad-core/src/nextjs/NextAppProviderPages.tsx index 710dbd91745..e9a25759c4e 100644 --- a/packages/toolpad-core/src/nextjs/NextAppProviderPages.tsx +++ b/packages/toolpad-core/src/nextjs/NextAppProviderPages.tsx @@ -1,10 +1,16 @@ import * as React from 'react'; -import Link from 'next/link'; +import NextLink from 'next/link'; import { asArray } from '@toolpad/utils/collections'; import { useRouter } from 'next/router'; +import { LinkProps } from '../shared/Link'; import { AppProvider } from '../AppProvider'; import type { AppProviderProps, Navigate, Router } from '../AppProvider'; +const Link = React.forwardRef((props, ref) => { + const { href, history, ...rest } = props; + return ; +}); + /** * @ignore - internal component. */ diff --git a/packages/toolpad-core/src/react-router/ReactRouterAppProvider.tsx b/packages/toolpad-core/src/react-router/ReactRouterAppProvider.tsx index af7e49aa65f..f76ab670257 100644 --- a/packages/toolpad-core/src/react-router/ReactRouterAppProvider.tsx +++ b/packages/toolpad-core/src/react-router/ReactRouterAppProvider.tsx @@ -5,8 +5,8 @@ import { AppProvider, type AppProviderProps, Navigate, Router } from '../AppProv import { LinkProps } from '../shared/Link'; const Link = React.forwardRef((props, ref) => { - const { href, ...rest } = props; - return ; + const { href, history, ...rest } = props; + return ; }); function ReactRouterAppProvider(props: AppProviderProps) { diff --git a/packages/toolpad-core/src/shared/Link.tsx b/packages/toolpad-core/src/shared/Link.tsx index 598cb87052d..9c4814bf8dc 100644 --- a/packages/toolpad-core/src/shared/Link.tsx +++ b/packages/toolpad-core/src/shared/Link.tsx @@ -5,13 +5,18 @@ import { RouterContext } from './context'; * @ignore - internal component. */ -export interface DefaultLinkProps extends React.AnchorHTMLAttributes { +export interface LinkProps extends React.AnchorHTMLAttributes { + /* + * "replace" will replace the history stack with the URL being navigated to + * "push" will push the URL being navigated to as a new entry onto the history stack + * "auto" is the default and the mimics the "push" behaviour + */ history?: 'auto' | 'push' | 'replace'; href: string; } export const DefaultLink = React.forwardRef(function Link( - props: DefaultLinkProps, + props: LinkProps, ref: React.ForwardedRef, ) { const { children, href, onClick, history, ...rest } = props; @@ -36,13 +41,6 @@ export const DefaultLink = React.forwardRef(function Link( ); }); -export interface LinkProps { - href: string; - children: React.ReactNode; - onClick?: React.MouseEventHandler; - style?: React.CSSProperties; -} - export const Link = React.forwardRef(function Link( props: LinkProps, ref: React.ForwardedRef,