Storybook: 反応ルーターを備えたコンポーネント

作成日 2017年04月14日  ·  13コメント  ·  ソース: storybookjs/storybook

反応ルーターを使用するコンポーネントでストーリーブックを使用するにはどうすればよいですか？

コンポーネントの例

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

エラー

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

picture garmjs
👍2

最も参考になるコメント

addDecorator関数を使用して、ストーリーをMemoryRouterでラップする必要があります。 スニペットは次のとおりです。

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

ここで完全な例を読むことができます： https ：

picture shilman 2017年04月14日
👍94 🎉28 ❤21 🚀2

全てのコメント13件

addDecorator関数を使用して、ストーリーをMemoryRouterでラップする必要があります。 スニペットは次のとおりです。

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

ここで完全な例を読むことができます： https ：

shilman picture shilman 2017年04月14日
👍94 🎉28 ❤21 🚀2

Storybookアクションを起動するためのリンクが必要な場合は、こちらのコメントを参照してください： https ：

nathancahill picture nathancahill 2017年04月14日
👍2

このエラーを検索していましたが、画像に投稿されていたため、この問題を見つけるのに苦労しました。 将来人々が見つけやすくするために、今すぐテキストを貼り付けます。

未定義のプロパティ「履歴」を読み取れません
TypeError：未定義のプロパティ 'history'を読み取ることができません
Link.render（http：// localhost：9001 / static / preview.bundle.js：52878：35）
http：// localhost ：9001 / static / preview.bundle.js：43410：21
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）
ReactCompositeComponentWrapper.performInitialMount（http：// localhost：9001 / static / preview.bundle.js：42976：30）
ReactCompositeComponentWrapper.mountComponent（http：// localhost：9001 / static / preview.bundle.js：42872：21）
Object.mountComponent（http：// localhost：9001 / static / preview.bundle.js：4438：35）
ReactDOMComponent.mountChildren（http：// localhost：9001 / static / preview.bundle.js：42241：44）
ReactDOMComponent._createInitialChildren（http：// localhost：9001 / static / preview.bundle.js：40403：32）

su-narthur picture su-narthur 2017年08月18日
👍13

MemoryRouterを使用しているときに以下のエラーが発生し、 MemoryRouterが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)

何が起こっているのか考えはありますか？

oyeanuj picture oyeanuj 2017年10月09日

こんにちは@oyeanuj 、
これについて何かニュースはありますか？ Routeを使用すると、非常によく似た問題が発生します。

aperkaz picture aperkaz 2017年11月13日

@aperkazこれをまだ

oyeanuj picture oyeanuj 2017年11月15日
👍3

使用しているreactルーターのバージョンを確認することをお勧めします。

上記の@shilmanによるソリューションは、 v3.3.8で機能します。

donpinkus picture donpinkus 2018年01月13日

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 picture sthzg 2018年05月04日
👍6 🎉2

受け入れられた答えはうまくいきますが、私は得ます

Uncaught ReferenceError: ___loader is not defined

このエラーに関するヘルプ

iwarner picture iwarner 2018年05月11日
👍3

グーグルで髪を引き裂いた後、将来ここに着陸する人のために、私があなたの時間を節約できるかもしれません。

私が取り組んでいたプロジェクトでは、 react-router （package.jsonの "^ 4.1.1"にありました）とreact-router-dom （ "next"にありました）のバージョンが一致していreact-router 。

これは私の場合、Reactがthis.context動作方法を変更し、 react-router-dom続くために問題を引き起こしました。 これは、私の<Link />がまだ存在していないメソッドでコンテキストをプルしようとし、非常に役に立たない「 外で" エラー。

"react-router-dom": "next"を"react-router-dom": "^4.1.1"切り替えることで修正しました。

Asday picture Asday 2018年07月27日
👍3

他の誰かにとって実際に私を助けたのはこのパッケージでした： https ：

SachaG picture SachaG 2019年03月02日
👍5

どうもありがとう、応答は助けました

OBrian16 picture OBrian16 2019年05月03日

フックを使用している人の場合：

`` `
'history'から{createMemoryHistory}をインポートします
import {Router、Route} from'react-router-dom '

const history = createMemoryHistory（{initialEntries：['/']}）

addDecorator（story =>）。

addDecorator（story =>（


））
「

jordiup picture jordiup 2019年11月12日
👍8
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

oriSomething picture oriSomething  ·  3コメント
ZigGreen picture ZigGreen  ·  3コメント
xogeny picture xogeny  ·  3コメント
zvictor picture zvictor  ·  3コメント
purplecones picture purplecones  ·  3コメント