Basename Not Included in href for Links in Left Navigation

Steps to reproduce

When a basename is added to React Router,the href in the left-side navigation does not include the basename.
While everything works fine during regular navigation, the path is incorrect when opening links in a new window or tab.
e.g., right-click -> Open link in new tab

@toolpad/core@0.11.0

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: navigation, routing, link, basename

Hi, could you please share a reproduction / CodeSandbox or the specific configuration you're using for React Router and the navigation passed to AppProvider?

I wonder if just including the basename in the segments for navigation items would be enough, but if that solution isn't elegant enough we can try to come up with something better.

I wonder if just including the basename in the segments for navigation items would be enough, but if that solution isn't elegant enough we can try to come up with something better.

I believe this will need to be part of the router adapter. the DashboardLayout should not need to know about the basepath.

Hi, could you please share a reproduction / CodeSandbox or the specific configuration you're using for React Router and the navigation passed to AppProvider?

const router = createBrowserRouter(
  [
    {
      Component: App,
      children: [
        {
          path: "",
          element: <Layout />,
          children: [
            {
              path: "",
              element: <Home />,
            },
            {
              path: "question",
              element: <QuestionList />,
            },
            {
              path: "question/:qid",
              element: <Question />,
            },
            {
              path: "exam_paper",
              element: <ExamPaperList />,
            },
            {
              path: "exam_paper/:pid",
              element: <ExamPaper />,
            },
          ],
        },
      ],
    },
  ],
  {
    basename: "/question-bank",
  }
);
const navigation: Navigation = [
  {
    title: 'Home',
    icon: <DashboardIcon />
  },
  {
    kind: 'divider'
  },
  {
    kind: 'header',
    title: 'Questions'
  },
  {
    segment: 'question',
    title: 'Questions',
    icon: <DescriptionIcon />,
    pattern: 'question{/:qid}*'
  },
  {
    segment: 'exam_paper',
    title: 'Exam Paper',
    icon: <NewspaperIcon />,
    pattern: 'exam_paper{/:pid}*'
  }
];

I wonder if just including the basename in the segments for navigation items would be enough, but if that solution isn't elegant enough we can try to come up with something better.

I tried placing the basename in the segments, but after clicking the navigation, it results in two layers of basename (e.g., Clicking "Questions" navigates to /question-bank/question-bank/question instead of /question-bank/question), which directly affects normal navigation behavior.

I tried placing the basename in the segments, but after clicking the navigation, it results in two layers of basename (e.g., Clicking "Questions" navigates to /question-bank/question-bank/question instead of /question-bank/question), which directly affects normal navigation behavior.

I see, I can confirm the issue.
Looks like we will need to add support for basename in the AppProvider for React Router, sorry for the inconvenience and thanks for reporting it!

@SilenceLeo

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

@SilenceLeo 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.

Navigation Menu

Repository navigation

Basename Not Included in href for Links in Left Navigation #4556

Steps to reproduce

Current behavior

Expected behavior

Context

Your environment

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Basename Not Included in href for Links in Left Navigation #4556

Description

Steps to reproduce

Current behavior

Expected behavior

Context

Your environment

Activity

apedroferreira commented on Dec 24, 2024

Janpot commented on Dec 24, 2024

SilenceLeo commented on Dec 25, 2024

apedroferreira commented on Jan 6, 2025

github-actions commented on Feb 24, 2025

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions