Storybook: Composant avec routeur React

Créé le 14 avr. 2017 · 13Commentaires · Source: storybookjs/storybook

Comment puis-je utiliser storybook avec des composants qui utilisent le routeur React

Exemple de composant

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

Erreur

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

Source

garmjs

👍2

Commentaire le plus utile

Vous devriez envelopper votre histoire dans un MemoryRouter utilisant la fonction addDecorator . Voici un extrait :

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

Vous pouvez lire un exemple complet ici : https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

shilman le 14 avr. 2017

👍94 🎉28 ❤21 🚀2

Tous les 13 commentaires

Vous devriez envelopper votre histoire dans un MemoryRouter utilisant la fonction addDecorator . Voici un extrait :

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

Vous pouvez lire un exemple complet ici : https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

shilman le 14 avr. 2017

👍94 🎉28 ❤21 🚀2

Voir ce commentaire ici si vous voulez des liens pour déclencher des actions Storybook : https://github.com/storybooks/react-storybook/issues/485#issuecomment -294105214

nathancahill le 14 avr. 2017

👍2

Je cherchais cette erreur et j'ai eu du mal à trouver ce problème car il a été publié dans une image. Collez le texte maintenant pour le rendre plus facile à trouver à l'avenir :

Impossible de lire la propriété « historique » d'undefined
TypeError : impossible de lire la propriété « historique » d'undefined
sur Link.render (http://localhost:9001/static/preview.bundle.js:52878:35)
sur http://localhost :9001/static/preview.bundle.js:43410:21
sur measureLifeCyclePerf (http://localhost:9001/static/preview.bundle.js:42690:12)
à ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:9001/static/preview.bundle.js:43409:25)
à ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:9001/static/preview.bundle.js:43436:32)
sur ReactCompositeComponentWrapper.performInitialMount (http://localhost:9001/static/preview.bundle.js:42976:30)
sur ReactCompositeComponentWrapper.mountComponent (http://localhost:9001/static/preview.bundle.js:42872:21)
sur Object.mountComponent (http://localhost:9001/static/preview.bundle.js:4438:35)
sur ReactDOMComponent.mountChildren (http://localhost:9001/static/preview.bundle.js:42241:44)
sur ReactDOMComponent._createInitialChildren (http://localhost:9001/static/preview.bundle.js:40403:32)

su-narthur le 18 août 2017

👍13

J'obtiens l'erreur ci-dessous lors de l'utilisation de MemoryRouter , et il semble que MemoryRouter sorte en tant que 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)

Quelques idées sur ce qui pourrait se passer?

oyeanuj le 9 oct. 2017

Bonjour @oyeanuj ,
Des nouvelles à ce propos? Je rencontre des problèmes assez similaires lors de l'utilisation de Route .

aperkaz le 13 nov. 2017

@aperkaz Je n'ai pas encore réussi à faire fonctionner cela, donc je

oyeanuj le 15 nov. 2017

👍3

Vous voudrez peut-être vérifier la version du routeur React que vous utilisez.

La solution de @shilman ci-dessus fonctionne avec le routeur

donpinkus le 13 janv. 2018

Pour le routeur de réaction 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 le 4 mai 2018

👍6 🎉2

La réponse acceptée fonctionne très bien, mais je reçois

Uncaught ReferenceError: ___loader is not defined

Toute aide avec cette erreur

iwarner le 11 mai 2018

👍3

Pour tous ceux qui atterrissent ici à l'avenir après avoir cherché sur Google et s'être arraché les cheveux, permettez-moi peut-être de vous faire gagner du temps.

Le projet sur lequel je travaillais avait une incompatibilité de version entre react-router (qui était à "^4.1.1" dans package.json) et react-router-dom , (qui était à "next").

Cela a causé un problème dans mon cas en raison du fait que React a modifié le fonctionnement de this.context et que react-router-dom emboîté le pas. Cela s'est terminé par mon <Link /> essayant d'extraire le contexte par une méthode qui n'existait pas encore, et jetant le exceptionnellement inutile "Vous ne devriez pas utiliser un en dehors d'un" Erreur.

Je l'ai corrigé en remplaçant "react-router-dom": "next" par "react-router-dom": "^4.1.1" .