Nested Router error after upgrading to Storybook v6.4 from v6.3

[wellyshen]

Thank you for this great platform. We're using react-router v6 in our project and some of our storybook components are using the useLoaction() hook of react-router. So we provide a location for the components by a decorator like this. After we upgrade Storybook from v6.3 to v6.4 we encounter the following error. So now we have to lock the minor version as ~6.3.8. Do you have any suggestions for that? Thank you.

[shilman]

We've updated the way we handle react-router in 6.5. Try upgrading to the latest prerelease:

npx sb@next upgrade --prerelease

Does that fix it?

[karsai5]

I still get the error when running v6.5.0-alpha.51. I'm using a MemoryRouter in a decorator, similar to what @wellyshen described

[shilman]

@karsai5 can you do an npm ls or yarn why to make sure you're running the 6.5 version of all storybook packages?

[karsai5]

I get the following result for @storybook/react

previously I was running 6.4.19 which worked fine. It's only since I updated to react-router 6 which doesn't seem to support nested <Router/>'s anymore that it stopped working.

[karsai5]

After doing some more reading I found this comment which seems to work in case anyone else runs into the same issue remix-run/react-router#7375 (comment).

My decorator now looks like this:

(Story) => (
  <UNSAFE_LocationContext.Provider value={null}>
    <MemoryRouter>
      <Story />
    </MemoryRouter>
  </UNSAFE_LocationContext.Provider>
),

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).