Storybook: 반응 라우터가 있는 구성 요소

addDecorator 함수를 사용하여 스토리를 MemoryRouter 감싸야 합니다. 다음은 스니펫입니다.

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

여기에서 전체 예제를 읽을 수 있습니다: https://blog.hichroma.com/graphql-react-tutorial-part-5-6-ac36b6962a8a

스토리북 작업을 실행하는 링크를 원하면 여기에서 이 댓글을 참조하세요. https://github.com/storybooks/react-storybook/issues/485#issuecomment -294105214

이 오류를 찾고 있었는데 이미지에 게시되어 있기 때문에 이 문제를 찾는 데 어려움을 겪었습니다. 사람들이 앞으로 더 쉽게 찾을 수 있도록 지금 텍스트를 붙여넣으세요.

정의되지 않은 속성 '기록'을 읽을 수 없습니다.
TypeError: 정의되지 않은 '기록' 속성을 읽을 수 없습니다.
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)

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 ,
이것에 대한 소식이 있습니까? Route 사용할 때 꽤 비슷한 문제가 발생합니다.

@aperkaz 아직 작동하지 않아서 Storybook에 해당 구성 요소를 포함하지 않았습니다.

사용 중인 반응 라우터의 버전을 확인하고 싶을 수 있습니다.

위의 @shilman 의 솔루션은 반응 라우터 4.1.1 및 @storybook/react v 3.3.8에서 작동합니다.

반응 라우터 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 />);

수락 된 답변은 훌륭하게 작동하지만

Uncaught ReferenceError: ___loader is not defined

이 오류에 대한 도움

인터넷 검색을 하고 머리카락을 뜯은 후에 여기에 오는 사람을 위해 시간을 절약할 수 있습니다.

내가 작업하고 있던 프로젝트는 react-router (package.json의 "^4.1.1"에 있음)와 react-router-dom ("next"에 있음) 사이에 버전 불일치가 있었습니다.

이것은 React가 this.context 작동 방식을 변경하고 react-router-dom 다음 소송으로 인해 제 경우에 문제를 일으켰습니다. 이것은 내 <Link /> 가 아직 존재하지 않는 방법으로 컨텍스트를 가져오려고 하고 매우 도움이 되지 않는 "당신은 사용해서는 안 됩니다. 외부" 오류.

"react-router-dom": "^4.1.1" "react-router-dom": "next" 로 전환하여 문제를 해결했습니다.

다른 사람에게 실제로 도움이 된 것은 이 패키지였습니다. https://github.com/gvaldambrini/storybook-router/

답변 감사합니다 도움이 되었습니다

후크를 사용하는 사람의 경우:

```
'기록'에서 { createMemoryHistory } 가져오기
'react-router-dom'에서 { 라우터, 경로 } 가져오기

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

addDecorator(스토리 =>)

addDecorator(스토리 => (


))
``