I'm working on Storybook project and I would like to display links from react-router. I saw that it was possible to use storybook-react-router, but when I import and use it in my MDX story it does not display anything (but the code is visible). How could I fix it?
This is my MDX code:
<Canvas>
<StoryRouter>
<List>
<Link to="#">Link</Link>
<Link to="#">Link</Link>
</List>
</StoryRouter>
</Canvas>
Thanks!
In the end I came up with the following. Does anyone have a better idea? I couldn't make storybook-react-router to work.
story.mdx
import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
import { Component } from 'Component';
import { useStoryReactRouterDecorator } from 'useStoryReactRouterDecorator'
<Meta
title="Component"
component={Component}
/>
<Canvas>
<Story name="With React Router"
args={paginationMocks.reactRouter}
decorators={[useStoryReactRouterDecorator(['/sample-default-path'])]}
>
<Component prop="example" />
</Story>
</Canvas>
useStoryReactRouterDecorator.tsx
import { StoryProps } from '@storybook/addon-docs'
import React, { FunctionComponent } from 'react'
import { MemoryRouter, Route, Routes, To, useLocation, useParams } from 'react-router-dom'
export const useStoryReactRouterDecorator = (initialEntries: To[]) => {
return (Story: FunctionComponent<StoryProps>) => {
return (
<MemoryRouter initialEntries={initialEntries}>
<Routes>
<Route path="*" element={<LocationLogger />} />
</Routes>
<Story />
</MemoryRouter>
)
}
}
const LocationLogger = (): JSX.Element => {
const location = useLocation()
const params = useParams()
console.log('Navigated to', location, 'with params', params) // Or Storybook's action()
return <></>
}