Add support for Route `handle`

[PanchoutNathan]

What is the new or updated feature that you are suggesting?

I upgraded to 6.4.1 in order to use use Matches. However, it has become complicated to use react router dom in storybook to choose path for example. How can I use this new version?

Why should this feature be included?

Be able to use useMatches and createBrowserRouter(router) in storybook decorators and select the routerPath in parameters

[JesusTheHun]

Hi, thanks for opening an issue. Can you be more specific about your need ? Ideally showcase your problem with some code !

[JesusTheHun]

I took a peak at this new router and its possibilities, there is a lot going on here! I will try to add basic support in the next couple weeks, I don't have much free time right now.

[PanchoutNathan]

I took a peak at this new router and its possibilities, there is a lot going on here! I will try to add basic support in the next couple weeks, I don't have much free time right now.

Thx a lot ! ;)

[BenjaminHoch-GoTo]

Any updates on this? If one of my components makes use of useMatches() the addon throws an error: useMatches must be used within a data router. See https://reactrouter.com/routers/picking-a-router.

[JesusTheHun]

Yes, I pinned an issue in this repo. A new version of this addon will be available by the end of next week, with support for data router.

[JesusTheHun]

@PanchoutNathan @BenjaminHoch-GoTo new version available, your feedback is greatly appreciated, please check #21

[BenjaminHoch-GoTo]

Thank you Jesus, I will try to upgrade today.

[BenjaminHoch-GoTo]

so i upgraded to 0.3.1 today but unfortunately for my specific storybook test it doesn't seem to be sufficient. My Breadcrumbs component uses the useMatches() hook from react-router. currently the storybook test uses createMemoryRouter and RouterProvider from react-router-dom to be able to test this. here are more details on how to use useMatches(): https://reactrouter.com/en/main/hooks/use-matches

in my test I create a mockRouter: const createMockRouter = () => { return createMemoryRouter( [ { path: '/', element: <MockLayout />, handle: { breadcrumbs: [ { name: 'Breadcrumb 1', to: '/' }, { name: 'Breadcrumb 2', to: '/' }, ], }, }, ], { initialEntries: ['/'] }, ) }

So basically the functionality to add the handle parameter is missing in your addon.

[JesusTheHun]

I've published v0.3.2 which add support for route handle. Checkout the README.md.

[BenjaminHoch-GoTo]

just wanted to report. i am not sure if I am not getting your implementation or if it doesn't work properly. In your examples in the readme you are describing routeHandle and having a string as value. So I tried this

export default {
  component: Breadcrumbs,
  decorators: [withRouter],
  parameters: {
    reactRouter: {
      routePath: '/',
      routeHandle: {
        breadcrumbs: [
          { name: 'Breadcrumb 1', to: '/route1' },
          { name: 'Breadcrumb 2', to: '/route2' },
        ],
      },
    },
  },
}

and

export default {
  component: Breadcrumbs,
  decorators: [withRouter],
  parameters: {
    reactRouter: {
      routePath: '/',
      routeHandle: "breadcrumbs"
    },
  },
}

both are not working. If I console.log('XXX - useMatches', useMatches()) in my component, the handle from useMatches is still undefined, but should be breadcrumbs..

here is how it should look like (done with createMemoryRouter from react-router-dom:

[JesusTheHun]

@BenjaminHoch-GoTo can you take a look at https://github.com/JesusTheHun/storybook-addon-react-router-v6/blob/dc81fc219c5c1026b6ca6853b1a80fe01506e812/src/stories/StoryRouteTree/Basics.stories.tsx#L52 and tell me if this story is correct ?

The associated test : https://github.com/JesusTheHun/storybook-addon-react-router-v6/blob/dc81fc219c5c1026b6ca6853b1a80fe01506e812/src/components/StoryRouteTree.spec.tsx#L50

Nevermind. I've found the issue. The component is tested but not the decorator itself. I will have to change that...

[JesusTheHun]

Ok I've updated all my tests to use the storybook decorator instead of the wrapping component directly. I have also fixed the issue itself.

Thanks you very much for your follow up & reports 🙏 Version 0.3.3 is available !

[BenjaminHoch-GoTo]

i can confirm it is now working as I expected. Thank you so much for the fast fixes, really appreciate that.

[JesusTheHun]

@BenjaminHoch-GoTo thank you for the kind and positive feedback. It means a lot.