Providing route params and query params to components

[Je12emy]

Issue:

Which version are you using?

1.0.8

Are you using storybook-router with a React based project or a Vue one?

React based project

Please describe the problem:

I would like to set a route for my component, which uses a route parameter for fetching data (which is intercepted and a response mocked using msw-storybook-addon)

Please explain how to reproduce the issue or (better) provide an example to do it.

Context

I have a React component which extracts a route parameters and queries and uses them to fetch my api.

const Details = () => {
  const client = useAxiosAuth(); // Custom axios client hook
  const history = useHistory(); // History hook provided by react router
  const location = useLocation(); // Hook provided by react-router

 // Hooks for extracting url parameters and queries
// Example path: /details/1?redeemable=true
  const { id } = useParams<{ id: string }>(); // result: 1
  const { redeemable } = queryString.parse(location.search); // result: true
  
// React-query is used for fetching data, implementation will be omited
  const { data, status } = useQuery<any>('collectible', () =>
    fetchCollectible(client, id),
  );
}

I am using msw-storybook-addon for intercepting each component's api request in my stories like so (this is another story which is not related to this problem):

export default {
  title: 'Screens/Profile',
  component: Profile,
  decorators: [
    (Story) => (
      <ContentContainer>
        <Story />
      </ContentContainer>
    ),
  ],
  parameters: {
    msw: [
      rest.get(
        `${process.env.REACT_APP_API_URL}/profile`,
        (_, res: any, ctx: any) => {
          return res(
            ctx.json({
              username: 'Foo',
              description: "bar",
              name: 'Jhon Doe'
            }),
          );
        },
      ),
    ],
  },
} as Meta;

export const ProfileStory: Story<any> = (args) => <Profile {...args} />;

Now only need to configure the first story to provide a URL for the component, since there isn't one, and error is thrown. Here since there isn't an id in the path, my component tries to execute a fetch request with an id of undefined

index.js:1581 GET http://localhost:3000/defatils/undefined/business 

I already checked the Params example, but honestly it makes to sense to me, since no param is being passed into the child component?

My Storybook Router Config

I am using the CSF and followed this issue for configuring this package (pls update the documentation with an example configuration for CSF).

Here's preview.js I didn't add any routes here.

addDecorator(storyRouterDecorator());

Here's the story causing me trouble

export default {
  title: 'Screens/CollectibleDetails',
  component: Details,
  decorators: [
    storyRouterDecorator({ // I tried to provide a link to this story hopping it would be used by the component
      '/details/1/business': linkTo(
        'Screens/CollectibleDetails',
        'RedeemableCollectible',
      ),
    }),
    (Story) => (
      <AppAlertProvider>
        <ContentContainer>
          <Story />
        </ContentContainer>
      </AppAlertProvider>
    ),
  ],
  parameters: {
    msw: [
      rest.get(
        `${process.env.REACT_APP_API_URL}/details/1/business`, // intercept this request
        (_, res: any, ctx: any) => { // Send this response
          return res(
            ctx.json({
            // some data
             }),
      ),
    ],
  },
} as Meta;

const Template: Story<any> = (args: any) => <Details {...args} />;

export const RedeemableCollectible = Template.bind({});

Note: I'm using typescript in my project