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 },
);