Cannot read property 'location' of undefined at useLocation

[nemonemi]

Describe the bug
The feature, which worked both in the Storybook and in the application, got the react-router hook useLocation introduced. Since then the feature in the Storybook is broken, but in the application, it works.

To Reproduce
I would provide a codesandbox, but I'm not sure how to set it up for the storybook. Do you have some examples or a boilerplate?

System
Environment Info:
System:
OS: Windows 10 10.0.17763
CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
Binaries:
Node: 14.16.0 - ~\AppData\Local\Volta\tools\image\node\14.16.0\node.EXE
Yarn: 1.22.10 - ~\AppData\Local\Volta\tools\image\yarn\1.22.10\bin\yarn.CMD
npm: 6.14.11 - ~\AppData\Local\Volta\tools\image\node\14.16.0\npm.CMD
Browsers:
Chrome: 89.0.4389.128
npmPackages:
@storybook/addon-essentials: 6.1.21 => 6.1.21
@storybook/addon-knobs: 6.1.11 => 6.1.11
@storybook/react: 6.1.11 => 6.1.11

[shilman]

You probably need to provide a decorator that provides the location so that the hook works?

https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper

[qiuxiaolian]

any example @shilman

[shilman]

Something like this: https://stackoverflow.com/questions/58909666/storybook-w-react-router-you-should-not-use-link-outside-router

[yukiohori]

import { MemoryRouter } from "react-router-dom";

export default {
  decorators: [
    (Story) => {
      return (
        <MemoryRouter>
            <Story />
        </MemoryRouter>
      );
    },
  ],
};

something like this works to me

[asifurrahaman754]

If anyone getting this error:
"You cannot use router inside router", try with this

(Story) => {
            return (
                <UNSAFE_LocationContext.Provider value={null}>
                    <MemoryRouter
                        initialEntries={['path']}
                    >
                        <Story />
                    </MemoryRouter>
                </UNSAFE_LocationContext.Provider>
            );
        },