Not working with nested `<Routes>`

[lifeiscontent]

If I render a component with nested <Routes> the story doesn't render.

example: https://stackblitz.com/edit/react-ts-miwcgv?file=App.tsx

[JesusTheHun]

Can you try version 0.1.13 and tell me if it works?

[lifeiscontent]

@JesusTheHun nope, that doesn't work.

[lifeiscontent]

I think the issue is here: https://github.com/JesusTheHun/storybook-addon-react-router-v6/blob/main/src/components/StoryRouter.tsx#L20

the path is generated, but there's no way to modify the root route path. the entry needs to point to /:id/:subId where the root route needs to point /:id/* and there's no way to currently specify both

[JesusTheHun]

You can wrap things in your story template :

export default {
    title: 'Example/Repro',
    component: ListingDetailPage,
    decorators: [withRouter],
};

const Template = (args) => (
    <Routes>
        <Route index element={<Link to="/1">Goto Id</Link>} />
        <Route path=":id/*" element={<ListingDetailPage />} />
    </Routes>
);

export const Default = Template.bind({});
Default.parameters = {
    reactRouter: {
        routePath: '*',
    }
}

[lifeiscontent]

@JesusTheHun that wouldn't render the ListingDetailPage directly (including the parent layout)

[JesusTheHun]

Quick update : I'm currently working on this feature. ETA : this week

[JesusTheHun]

@lifeiscontent I've published version 0.2.1 which includes support for descendant routes.

Can you give it a try ? I've added some instructions in the readme ;)

It took some time because I wanted to still be able to provides route params for descendant routes, something that react router does not provide so I had to hackaround. Check the new routeMatches property in the log panel.

Let me know if you face any difficulties or have any question.

[lifeiscontent]

@JesusTheHun almost! using the /* renders the page, but :subId is not defined in params, instead it has the correct value but the param is * instead of :subId

[lifeiscontent]

also, not sure if its helpful, but its common to publish .rc releases for features that are in flux, not sure if you knew about rc releases, but just wanted to call it out in case you didn't / find it useful.

[lifeiscontent]

Oh, actually it's working as expected, I just had my route param setup incorrect. Oops! 😅

[JesusTheHun]

Thanks for your feedback. Do you think routeMatches is confusing ? Shall I make the routeParams display the params of all routes instead of using the routeMatches property ? Because right now the routeParams only show the params of the route declared at routePath. So this change would unify the behaviour ; maybe we don't make it an array if there is only one matching route.

// this version would display all params available inside the route's element
routeParams = [
  '/listing/*': { *: '1/1' },
  '/:id': { id: 1 },
  '/:subId': { id: 1, subId: 1 },
]

// display only additional params
routeParams = [
  '/listing/*': { *: '1/1' },
  '/:id': { id: 1 },
  '/:subId': { subId: 1 },
]

// we try to be smart (dangerous)
routeParams = [
  // '/listing/*': { *: '1/1' }, # we detect no dynamic param and a wildcard so we don't show this entry
  '/:id': { id: 1 },
  '/:subId': { subId: 1 },
]