StorybookでReact Routerのコンポーネントを取り扱う時の覚書

Storybook – UI dev environment you’ll love to use便利ですよね。 チーム開発するときに、「どのタグがどういう表示になるか」を簡単にプレビューできるの […]

広告ここから
広告ここまで

目次

    Storybook – UI dev environment you’ll love to use便利ですよね。
    チーム開発するときに、「どのタグがどういう表示になるか」を簡単にプレビューできるので、積極的に使いたいツールの1つです。

    ただ、Linkタグを使っているコンポーネントをドキュメントにしたいときもあったりしますが、そのまま書くとエラーになります。

    サンプルコード

    /* eslint-disable import/no-extraneous-dependencies, react/jsx-filename-extension */
    import React from 'react';
    import { storiesOf } from '@storybook/react';
    import Header from '../Header';
    
    storiesOf('Layouts', module)
      .addWithInfo(
        'Header',
        'This is the general header component.',
        () => (
          <Header />
        ),
        { inline: true },
      );
    

    実行結果

    対策:MemoryRouterの子要素として配置する

    ユニットテストの時の案内に書かれてる対策と同じですが、MemoryRouterの子要素にすることでエラーを回避できます。

    /* eslint-disable import/no-extraneous-dependencies, react/jsx-filename-extension */
    import React from 'react';
    import { storiesOf } from '@storybook/react';
    import { MemoryRouter as Router } from 'react-router-dom';
    import Header from '../Header';
    
    storiesOf('Layouts', module)
      .addWithInfo(
        'Header',
        'This is the general header component.',
        () => (
          <Router>
            <Header />
          </Router>
        ),
        { inline: true },
      );
    
    広告ここから
    広告ここまで
    Home
    Search
    Bookmark