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

正在搜索此错误，但很难找到此问题，因为它已发布在图像中。 现在粘贴文本，以便人们将来更容易找到：

无法读取未定义的属性“历史”
类型错误：无法读取未定义的属性“历史”
在 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的解决方案适用于 react router 4.1.1 和 @storybook/react v 3.3.8

donpinkus picture donpinkus 于 2018-01-13

对于反应路由器 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 改变了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

对于任何使用钩子的人：

``
从“历史”导入 { createMemoryHistory }
从'react-router-dom'导入{路由器，路由}

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

添加装饰器（故事 =>)

addDecorator(故事 => (


))
``

jordiup picture jordiup 于 2019-11-12
👍8
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

levithomason picture levithomason  ·  3评论
wahengchang picture wahengchang  ·  3评论
shilman picture shilman  ·  3评论
tlrobinson picture tlrobinson  ·  3评论
ZigGreen picture ZigGreen  ·  3评论