NextJS Page Router - navigation item is not matching if url has query params

[theajr]

Steps to reproduce

Steps:

1. Open this link to live example: https://wrznmm-3000.csb.app/ Code:https://codesandbox.io/p/github/theajr/toolpad-issue/draft/tender-glade
2. Click on Pending Orders or Completed Orders which takes you to orders page but with extra query params.
3. See Orders menu on left doesn't show as selected.
4. So, the pattern matching is not working for NextJS page routing?

PS. If I have nested routing, how to make sure the menu open state to true by default?

Current behavior

• When url has query params, navigation item is not being selected.

Expected behavior

• Navigation item selected behaviour should not rely not query params.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.1 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 20.12.1 - /home/codespace/nvm/current/bin/node
    npm: 10.5.0 - /home/codespace/nvm/current/bin/npm
    pnpm: 8.15.6 - /home/codespace/nvm/current/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11 => 11.13.3 
    @emotion/styled: ^11 => 11.13.0 
    @mui/base:  5.0.0-beta.68 
    @mui/core-downloads-tracker:  6.1.6 
    @mui/icons-material: ^6 => 6.1.6 
    @mui/lab:  6.0.0-beta.22 
    @mui/material: ^6 => 6.1.6 
    @mui/material-nextjs: ^6 => 6.1.6 
    @mui/private-theming:  6.1.6 
    @mui/styled-engine:  6.1.6 
    @mui/system:  6.1.6 
    @mui/types:  7.2.21 
    @mui/utils:  6.4.0 
    @toolpad/core: ^0.12.0 => 0.12.0 
    @toolpad/utils:  0.12.0 
    @types/react: ^19.0.0 => 19.0.6 
    react: ^19.0.0 => 19.0.0 
    react-dom: ^19.0.0 => 19.0.0 
    typescript: ^5 => 5.6.3 

npm notice 
npm notice New major version of npm available! 10.5.0 -> 11.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.1.0
npm notice Run npm install -g [email protected] to update!
npm notice 

Search keywords: pattern, navigation

[apedroferreira]

It works for me when I try it in our Vite example, as changing the URL to something like http://localhost:5173/orders?status=pending still has the Orders item selected.

But the issue might be something different. Unfortunately I can't access the CodeSandbox link you provided - you probably have to make it public?

If I have nested routing, how to make sure the menu open state to true by default?

If one of the nested pages is the currently active page its parent items should start open when the page loads.
If not feel free to create a separate issue for that!

[theajr]

@apedroferreira Thanks for checking. I think the issue is specific to NextJS+Page Router combination. It worked for NextJS + App Router for me and Vite for you.

Please try by cloning https://github.com/theajr/toolpad-issue.

[apedroferreira]

@apedroferreira Thanks for checking. I think the issue is specific to NextJS+Page Router combination. It worked for NextJS + App Router for me and Vite for you.

Please try by cloning https://github.com/theajr/toolpad-issue.

You're right, I can confirm, thanks for finding the issue! I should've checked the Next.js Pages Router example.

Working on a fix in #4657
Once it's merged it should be included in the next release.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@theajr How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.