How to navigate to basename (root route)?

[antonisprovidakis]

Let's say I have this structure:

function App() {
  return (
    <BrowserRouter basename="/backend">
      <Routes>
        <Route path="/">
          <Route
            path="page1"
            element={<Page1 />} />
        </Route> 
      </Routes>
    </BrowserRouter>
  );
}

and the url is currently at www.foobar.com/backend/page1.

Somewhere inside <Page1> there is a <Link> that I want to link back to the "root": /backend.
So, if the <Link> is rendered like this: <Link to="/" />, it links to www.foobar.com/backend/. Please, notice the trailing /. However, I'd like it to be: www.foobar.com/backend, without the trailing /.

How can I achieve that?

[brophdawg11]

What version of react router are you using? We did some work a while back to let you control this via inclusion or exclusion in basename:

• <BrowserRouter basename="/backend"> would make <Link to="/"> go to /backend
• <BrowserRouter basename="/backend/"> would make <Link to="/"> go to /backend/

If it's not working on the latest for you could you provide a reproduction? It seemed to work for me in a quick local test.

[antonisprovidakis]

Sorry, forgot to mention the version 🤦‍♂️.
It's "react-router-dom": "6.2.1".

Then I guess it's working on later than "6.2.1".

Do you remember on what version was this change implemented?

[brophdawg11]

https://github.com/remix-run/react-router/releases/tag/react-router%406.4.0 via #8861

[antonisprovidakis]

Thank you so much! 🙇‍♂️