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

इस त्रुटि की खोज कर रहा था, और इस समस्या को खोजने में कठिन समय था क्योंकि इसे एक छवि में पोस्ट किया गया था। भविष्य में लोगों के लिए इसे ढूंढना आसान बनाने के लिए टेक्स्ट को अभी पेस्ट करना:

अपरिभाषित की संपत्ति 'इतिहास' नहीं पढ़ सकता
लेखन त्रुटि: अपरिभाषित की संपत्ति 'इतिहास' नहीं पढ़ सकता
Link.render पर (http://localhost:9001/static/preview.bundle.js:52878:35)
http://localhost :9001/static/preview.bundle.js:43410:21 . पर
माप पर LifeCyclePerf (http://localhost:9001/static/preview.bundle.js:42690:12)
ReactCompositeComponentWrapper._renderValidatedComponentWithOwnerOrContext पर (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 मैं इसे अभी तक काम नहीं कर सका, इसलिए स्टोरीबुक में उन घटकों को शामिल नहीं किया :( मैं एक समाधान की भी प्रतीक्षा करूंगा ..

आप यह जांचना चाहेंगे कि आप किस प्रतिक्रिया राउटर का उपयोग कर रहे हैं।

उपरोक्त @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 (जो "अगला" पर था) के बीच मेल नहीं खाता था।

इसने मेरे मामले में this.context काम करने के तरीके को बदलने और react-router-dom सूट के बाद प्रतिक्रिया के कारण एक समस्या का कारण बना। यह मेरे <Link /> साथ समाप्त हुआ, जो एक ऐसी विधि द्वारा संदर्भ खींचने की कोशिश कर रहा था जो अभी तक मौजूद नहीं था, और असाधारण रूप से अनुपयोगी "आपको एक का उपयोग नहीं करना चाहिए" बाहर एक" त्रुटि।

मैंने "react-router-dom": "next" को "react-router-dom": "^4.1.1" लिए स्विच करके इसे ठीक किया।

किसी और के लिए जिसने वास्तव में मेरी मदद की वह यह पैकेज था: https://github.com/gvaldambrini/storybook-router/

बहुत बहुत धन्यवाद, प्रतिक्रियाओं ने मदद की

हुक का उपयोग करने वाले किसी के लिए:

```
आयात { createMemoryHistory } 'इतिहास' से
'रिएक्शन-राउटर-डोम' से {राउटर, रूट} आयात करें

कास्ट इतिहास = createMemoryHistory ({प्रारंभिक प्रविष्टियां: ['/']})

एडडेकोरेटर (कहानी =>)

एडडेकोरेटर (कहानी => (


))
``