title: React + Redux + Storybook: How to use connected react router's useParams when writing storybook stories?
body: <p>I have a react component that grabs an <code>id</code> from the route and uses that to load some data and populate the redux state.</p>
  <p>I am using <code>useParams</code> from 'react-router' to do this.</p>
  <pre class="lang-js prettyprint-override"><code>import { useParams } from 'react-router'
  
  import { usePreload } from './hooks'
  import Display from './Display'
  
  const Overview = () =&gt; {
    const { id } = useParams()
    const { data } = usePreload(id) // uses useEffect to preload the data with the given id
  
    return &lt;Display data={data} /&gt;
  }
  
  export default Overview
  </code></pre>
  <p>I've got a story</p>
  <pre class="lang-js prettyprint-override"><code>import Overview from './Overview'
  
  import preloadData from './decorators/preloadData'
  
  export default {
    title: 'Redux/scenes/Overview',
    decorators: [preloadData()],
    component: Overview,
    argTypes: {}
  }
  
  const Template = args =&gt; &lt;Overview {...args} /&gt;
  
  export const Default = Template.bind({})
  </code></pre>
  <p>The <code>preloadData</code> decorator is simply</p>
  <pre class="lang-js prettyprint-override"><code>import { usePreload } from '../hooks'
  import { data } from './fixtures'
  
  const Loaded = ({ children }) =&gt; {
    useSubmissionsPreload(data.id) // loads the site data into the state
  
    return &lt;&gt;{children}&lt;/&gt;
  }
  
  const preloadData = () =&gt; Story =&gt; (
    &lt;Loaded&gt;
      &lt;Story /&gt;
    &lt;/Loaded&gt;
  )
  
  export default preloadData
  </code></pre>
  <p>The code all works fine when actually running in the site but when running within a story there is no <code>:id</code> in the path for <code>useParams</code> to pick up.</p>
  <p>For now I am just going to skip this story and just test the <code>Display</code> component, but the completist in me demands to know how to get this to work.</p>