Closed PanchoutNathan closed 1 year ago
Hi, thanks for opening an issue. Can you be more specific about your need ? Ideally showcase your problem with some code !
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.
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 ! ;)
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.
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.
@PanchoutNathan @BenjaminHoch-GoTo new version available, your feedback is greatly appreciated, please check #21
Thank you Jesus, I will try to upgrade today.
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.
I've published v0.3.2
which add support for route handle. Checkout the README.md.
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:
@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...
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 !
i can confirm it is now working as I expected. Thank you so much for the fast fixes, really appreciate that.
@BenjaminHoch-GoTo thank you for the kind and positive feedback. It means a lot.
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