Storybook: Component with react router

Created on 14 Apr 2017 · 13Comments · Source: storybookjs/storybook

How can i use storybook with components wich uses react router

Component example

import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import Brand from './components'

const Logo = ({children}) => {
  return (
    <Link to='/'>
      <Brand>
        {children}
      </Brand>
    </Link>
  )
}

Logo.propTypes = {
  children: PropTypes.string.isRequired
}

export default Logo

Error

screen shot 2017-04-14 at 4 27 22 am

Source

garmjs

👍2

Most helpful comment

You should wrap your story in a MemoryRouter using the addDecorator function. Here's a snippet:

storiesOf('Logo', module)
  .addDecorator(story => (
      <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
  ))
  .add('normal', () => <Logo />)

You can read a full example here: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

shilman on 14 Apr 2017

👍94 🎉28 ❤21 🚀2

All 13 comments

You should wrap your story in a MemoryRouter using the addDecorator function. Here's a snippet:

storiesOf('Logo', module)
  .addDecorator(story => (
      <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
  ))
  .add('normal', () => <Logo />)

You can read a full example here: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

shilman on 14 Apr 2017

👍94 🎉28 ❤21 🚀2

See this comment here if you want links to fire Storybook actions: https://github.com/storybooks/react-storybook/issues/485#issuecomment-294105214

nathancahill on 14 Apr 2017

👍2

Was searching for this error, and had a hard time finding this issue because it was posted in an image. Pasting the text now to make it easier for people to find in the future:

Cannot read property 'history' of undefined
TypeError: Cannot read property 'history' of undefined
at Link.render (http://localhost:9001/static/preview.bundle.js:52878:35)
at http://localhost:9001/static/preview.bundle.js:43410:21
at measureLifeCyclePerf (http://localhost:9001/static/preview.bundle.js:42690:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:9001/static/preview.bundle.js:43409:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:9001/static/preview.bundle.js:43436:32)
at ReactCompositeComponentWrapper.performInitialMount (http://localhost:9001/static/preview.bundle.js:42976:30)
at ReactCompositeComponentWrapper.mountComponent (http://localhost:9001/static/preview.bundle.js:42872:21)
at Object.mountComponent (http://localhost:9001/static/preview.bundle.js:4438:35)
at ReactDOMComponent.mountChildren (http://localhost:9001/static/preview.bundle.js:42241:44)
at ReactDOMComponent._createInitialChildren (http://localhost:9001/static/preview.bundle.js:40403:32)

su-narthur on 18 Aug 2017

👍13

I get the error below while using MemoryRouter, and it seems that MemoryRouter is coming out as undefined.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
    at invariant (http://localhost:6006/static/preview.bundle.js:2056:15)
    at createFiberFromElementType (http://localhost:6006/static/preview.bundle.js:27773:5)
    at createFiberFromElement (http://localhost:6006/static/preview.bundle.js:27718:15)
    at reconcileSingleElement (http://localhost:6006/static/preview.bundle.js:28966:19)
    at reconcileChildFibers (http://localhost:6006/static/preview.bundle.js:29065:35)
    at reconcileChildrenAtPriority (http://localhost:6006/static/preview.bundle.js:29715:30)
    at reconcileChildren (http://localhost:6006/static/preview.bundle.js:29706:5)
    at finishClassComponent (http://localhost:6006/static/preview.bundle.js:29842:5)
    at updateClassComponent (http://localhost:6006/static/preview.bundle.js:29814:12)
    at beginWork (http://localhost:6006/static/preview.bundle.js:30193:16)

Any ideas what might be going on?

oyeanuj on 9 Oct 2017

Hello @oyeanuj,
Any news about this? I am getting pretty similar issues when using Route.

aperkaz on 13 Nov 2017

@aperkaz I couldn't get this to work yet, so not including those components in Storybook :( I'll wait for a solution as well..

oyeanuj on 15 Nov 2017

👍3

You may want to check what version of react router you're using.

The solution by @shilman above works with react router 4.1.1 and @storybook/react v 3.3.8

donpinkus on 13 Jan 2018

For react-router 3:

// ...
import { Router, Route } from 'react-router';
import createMemoryHistory from 'react-router/lib/createMemoryHistory';

storiesOf('Foo', module)
  .addDecorator(story => (
    <Router history={createMemoryHistory('/')}>
      <Route path="/" component={() => story()} />
    </Router>
  ))
  .add('Default', () => <Foo />);

sthzg on 4 May 2018

👍6 🎉2

Accetped answer works great, but I get

Uncaught ReferenceError: ___loader is not defined

Any help with this error

iwarner on 11 May 2018

👍3

For anyone landing here in future after googling and tearing out hair, allow me to maybe save you some time.

The project I was working on had a version mismatch between react-router (which was at "^4.1.1" in package.json), and react-router-dom, (which was at "next").

This caused an issue in my case due to React changing the way this.context works, and react-router-dom following suit. This ended up with my <Link /> trying to pull context by a method that didn't exist yet, and throwing the exceptionally unhelpful "You should not use a outside a " error.

I fixed it by switching "react-router-dom": "next" out for "react-router-dom": "^4.1.1".