Navigation links with locale

[oscar-b]

Steps to reproduce

Steps:

1. Open this link to live example: (required)

Current behavior

Links in the navigation points to /admin instead of /en/admin, causing a full reload on navigation.

Expected behavior

Links should take the active locale into consideration, for instance linking to /en/admin.

Context

I'm trying to create navigation links with locales in the URL: https://nextjs.org/docs/app/building-your-application/routing/internationalization

The concept with segment for navigation makes it hard to for instance use getPathname() from next-intl as a halper.

I guess we'd need a way to change the navigation component that's used by AppProvider/DashboardLayout, or being able to provide a href instad of a segment.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: navigation, locale, react-intl, internationalization

[apedroferreira]

Hi, we plan to make the navigation items overridable in #4413 which might help solve this issue.

But can you please share your navigation configuration or a reproduction if possible?
Just wondering why a navigation item segment with "en/admin" or even a dynamic "${locale}/admin" would not work.

[oscar-b]

@apedroferreira Hi! Thanks, you're right, I mis-diagnosed this a bit, the root issue was that I imported the default AppProvider and not the nextjs variant 🤦🏻 Using ${locale}/post/${id} almost works now, however wrapping the same navigation items in a NavigationSubheaderItem changes the behavior. Is this a know issue?

https://codesandbox.io/p/sandbox/upbeat-sammet-dlvrrn

The nested links point to https://movies/lord-of-the-rings instead of https://dlvrrn.csb.app/movies/lord-of-the-rings

[apedroferreira]

@apedroferreira Hi! Thanks, you're right, I mis-diagnosed this a bit, the root issue was that I imported the default AppProvider and not the nextjs variant 🤦🏻 Using ${locale}/post/${id} almost works now, however wrapping the same navigation items in a NavigationSubheaderItem changes the behavior. Is this a know issue?

https://codesandbox.io/p/sandbox/upbeat-sammet-dlvrrn

The nested links point to https://movies/lord-of-the-rings instead of https://dlvrrn.csb.app/movies/lord-of-the-rings

Ok, we have a release coming out right now that will change it to import { NextAppProvider } from '@toolpad/core/nextjs'; to help reduce this type of confusion!

Unfortunately I can't access your reproduction, it seems like it's a permissions issue?

[oscar-b]

Unfortunately I can't access your reproduction, it seems like it's a permissions issue?

Sorry, not used to Codesandbox, should be accessible now!

[Janpot]

Likely the same issue as #4556. Caused by the rendered a not taking router specific behaviors into account, unlike the javascript based navigation.

[apedroferreira]

Understood the issue now, it looks to be related to the way we build the paths from segments in a nested navigation.
Thanks for reporting it!