Storybook: Komponente mit Reaktionsrouter

Sie sollten Ihre Geschichte mit der Funktion addDecorator in ein MemoryRouter einpacken. Hier ein Ausschnitt:

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

Ein vollständiges Beispiel können Sie hier lesen: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

Sehen Sie sich diesen Kommentar hier an, wenn Sie Links zum Auslösen von Storybook-Aktionen wünschen: https://github.com/storybooks/react-storybook/issues/485#issuecomment -294105214

Habe nach diesem Fehler gesucht und konnte dieses Problem nur schwer finden, da es in einem Bild gepostet wurde. Fügen Sie den Text jetzt ein, um ihn in Zukunft leichter zu finden:

Eigenschaft 'Verlauf' von undefined kann nicht gelesen werden
TypeError: Eigenschaft 'Verlauf' von undefined kann nicht gelesen werden
bei Link.render (http://localhost:9001/static/preview.bundle.js:52878:35)
unter http://localhost :9001/static/preview.bundle.js:43410:21
bei measureLifeCyclePerf (http://localhost:9001/static/preview.bundle.js:42690:12)
bei ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:9001/static/preview.bundle.js:43409:25)
bei ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:9001/static/preview.bundle.js:43436:32)
bei ReactCompositeComponentWrapper.performInitialMount (http://localhost:9001/static/preview.bundle.js:42976:30)
bei ReactCompositeComponentWrapper.mountComponent (http://localhost:9001/static/preview.bundle.js:42872:21)
bei Object.mountComponent (http://localhost:9001/static/preview.bundle.js:4438:35)
bei ReactDOMComponent.mountChildren (http://localhost:9001/static/preview.bundle.js:42241:44)
bei ReactDOMComponent._createInitialChildren (http://localhost:9001/static/preview.bundle.js:40403:32)

Ich erhalte die folgende Fehlermeldung bei der Verwendung von MemoryRouter , und es scheint, dass MemoryRouter als 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)

Irgendwelche Ideen, was los sein könnte?

Hallo @oyeanuj ,
Irgendetwas Neues darüber? Ich bekomme ziemlich ähnliche Probleme, wenn ich Route .

@aperkaz Ich konnte das noch nicht zum

Vielleicht möchten Sie überprüfen, welche Version des Reaktionsrouters Sie verwenden.

Die Lösung von @shilman oben funktioniert mit dem

Für Reaktionsrouter 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 />);

Akzeptierte Antwort funktioniert super, aber ich bekomme

Uncaught ReferenceError: ___loader is not defined

Irgendwelche Hilfe bei diesem Fehler

Für alle, die in Zukunft hier landen, nachdem sie gegoogelt und Haare ausgerissen haben, gestatten Sie mir, Ihnen vielleicht etwas Zeit zu sparen.

Das Projekt, an dem ich arbeitete, hatte einen Versionskonflikt zwischen react-router (das war bei "^4.1.1" in package.json) und react-router-dom (das war bei "next").

Dies führte in meinem Fall zu einem Problem, da React die Funktionsweise von this.context änderte und react-router-dom diesem Beispiel folgte. Dies endete damit, dass ich <Link /> versuchte, Kontext mit einer Methode abzurufen, die noch nicht existierte, und das außergewöhnlich wenig hilfreiche "Sie sollten kein a außerhalb a" Error.

Ich habe es behoben, indem ich "react-router-dom": "next" gegen "react-router-dom": "^4.1.1" .

Für alle anderen hat mir dieses Paket tatsächlich geholfen: https://github.com/gvaldambrini/storybook-router/

Vielen Dank, die Antworten haben geholfen

Für alle, die Haken verwenden:

```
import { createMemoryHistory } aus 'history'
import { Router, Route } from 'react-router-dom'

const history = createMemoryHistory({ initialEntries: ['/'] })

addDecorator(story =>)

addDecorator(story => (


))
``