Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Routers MemoryRouter does not work as expected when given a basename prop

For some reason, I struggle alot with getting the MemoryRouter to render Routes when I supply a basename prop to the url.

I made an example demonstrating what I mean here:
https://codesandbox.io/p/sandbox/memory-router-woes-hmt5mn?file=%2Fsrc%2FApp.tsx

I want my router to render routes under the basename "/web"
So, if the user visits "/web/" it should render PageOne. If a user hits "/web/list" it should render PageTwo.

I try to achieve this by configuring my MemoryRouter like this:

<MemoryRouter basename="/web">
        <Routes>
          <Route path="/" element={<PageOne />} />
          <Route path="/list" element={<PageTwo />} />
        </Routes>
</MemoryRouter>

The routes never render, and I just can’t understand why. I am sure there must be something obvious/basic I am not seeing here.

Can you spot what I have missed?

I am using React Router v6.23.1

I tried to run this code without the basename prop and made sure to visit an url without the /web suffix. This works as expected. Once I add the basename prop and visit the url with the /web suffix, it will not render any of the routes.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After asking other people, one of my collegaues pointed out that this works as expected when the MemoryRouter is initialized with an 'initalEntries=["/web"]'

    I updated my sandbox to reflect it: https://codesandbox.io/p/sandbox/memory-router-woes-hmt5mn?file=%2Fsrc%2FApp.tsx


  2. 0

    Check your console logs, there is a warning regarding the basename prop and why nothing is rendered:

    <Router basename="/web"> is not able to match the URL "/" because it
    does not start with the basename, so the <Router> won’t render
    anything.

    Complete error:

     <Router basename="/web"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything. 
    at Router (https://hmt5mn.csb.app/node_modules/react-router/dist/index.js:1059:18)
    at MemoryRouter (https://hmt5mn.csb.app/node_modules/react-router/dist/index.js:1007:18)
    at div
    at App

    The sandbox is served from "/" so there is a mismatch between it and the memory router’s basename prop and so the router won’t render anything. When you build and deploy the app and serve/host it from some ".../web" sub-directory the basename prop should work as you are expecting.

    If you want, you could probably conditionally apply which basename value to use depending on the build type.

    Example:

    const basename = process.env.REACT_APP_NODE_ENV === "development"
  ? "/"
  : "/web";

...

<MemoryRouter basename={basename}>
  <Routes>
    <Route path="/" element={<PageOne />} />
    <Route path="/list" element={<PageTwo />} />
  </Routes>
</MemoryRouter>

    Note that in the sandbox it’s process.env.NODE_ENV that you would reference.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search