[NextAppProviderPages] Extend Navigate for NextAppProvider to include next/router/TransitionOptions like shallow, locale, scroll.

[marcomele]

Summary

When using DashboardLayout with NextAppProvider, NavigationPageItem could allow for extra props to be passed to nextjs router TransitionOptions to control shallow navigation and transition scroll behavior.

Examples

No response

Motivation

No response

Search keywords: next app pages router transition options shallow scroll

[apedroferreira]

Hi, have you tried using the Link property in the router prop that gets passed to the NextAppProvider, and setting a custom link component there?

You should be able to use a component kind of like:

const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
  const { href, history, ...rest } = props;
  return <NextLink ref={ref} href={href} replace={history === 'replace'} scroll shallow {...rest} />;
});

Other than that we're also adding a renderItem prop to navigation page items, so technically anything can be rendered in their place and any logic can be added.

Edit: Nevermind, I guess you would need to pass a whole custom router to NextAppProvider in that case. There should be a more straightforward way to do it.