Storybook - Error: useLocation may be used only in the context of a <Router> component

[jakubzet]

Hi,
First of all - many thanks for the great package!
I've encountered an issue similar to one in #36. However, as the package update helped in main project, the issue still occurs in Storybook story. It's set up with MemoryRouter - it's the only difference compared to main app.

What I did is - in app, I added the change below:

  // Hook usage
  const location = useLocation();
  const breadcrumbs = useBreadcrumbs(undefined, undefined, location);
  
  // Copied useBreadcrumbs code added locally in app
  const useReactRouterBreadcrumbs = (
    routes?: BreadcrumbsRoute[],
    options?: Options,
    // The location is now added as third parameter
    location?: Location,
  ): BreadcrumbData[] =>
    getBreadcrumbs({
      routes: routes || [],
      // Using provided location makes the error mentioned in title gone
      location: location || useLocation(),
      options,
    });

As you can see, when I use "useLocation" explicitly and pass the results as third, additional parameter, the hook works fine both in app, as well in Storybook.

I can submit a small PR for this change, yet I'm not sure if anyone else had similar issue and if this even the best fix possible.

EDIT: What could be important is that I use new, V6 useRoutes API (as described in docs: https://reactrouter.com/docs/en/v6/getting-started/concepts#defining-routes)

[icd2k3]

hi @jakubzet - Can you post an example of your storybook story? I think the original error Error: useLocation may be used only in the context of a <Router> is because <Router> is a provider that useLocation needs. So maybe you'd have to wrap the entire story with it?

I'm doing something similar here in the test file by importing the MemoryRouter then making sure it wraps every test render.

[icd2k3]

Closing for now