React-router doesn\'t work well when loaded from a route instead of the home page

Question

We're using react 16.13 and react-router-dom 5.1.2 but we struggle to make it work the way we want:

• it works great when used with our https://react.domain.com/
• but it doesn't when a user starts the app directly on a subpage, https://react.domain.com/page1 as we can't find any way to tell react-router that the base url is still / and not page1/

(We've configured the nodejs/express backend to send the react app no matter the route)

So react-router just adds all the history / path to the /page1 url, resulting in /page1/login, /page1/page1, etc. instead of the /login or /page1 urls.

Is there any way to achieve that? The goal is to allow the refresh of the page, and to allow direct access to a specific route.

Thanks

Answer 1

You need to use Routes rather than Switch for react-router-dom@6. Something like this:

    <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
          </Route>
        </Routes>
      </BrowserRouter>