Basename Not Included in href for Links in Left Navigation

[SilenceLeo]

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/[email protected]

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

No response

Search keywords: navigation, routing, link, basename

[apedroferreira]

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.

[Janpot]

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.

[SilenceLeo]

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.

[apedroferreira]

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!