介绍
storybook-react-router 是一个可以在 Storybook 中使用 React Router 的插件。使用它可以方便地在 Storybook 中展示你的路由组件，无需依赖一个完整的应用，从而提高了开发效率。
安装
使用 npm 安装 storybook-react-router：
npm install --save-dev storybook-react-router
配置
添加以下内容到 .storybook/main.js 中：
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
addons: ['storybook-react-router'],
};使用
假设你的 Route 组件代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
----- --- - -- -- -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
--
------ ------- ----在 stories 目录下创建 Route.stories.js：
import React from 'react';
import { storiesOf } from '@storybook/react';
import App from './App';
storiesOf('Route', module).add('default', () => <App />);在这个例子中，Route.stories.js 中的 App 组件是被 storybook-react-router 插件包装后的版本。打开 Storybook，你应该能够看到渲染出来的 App 组件，并在 URL 中看到对应的路由信息。
高级用法
如果需要自定义路由，可以在 storybook/config.js 中创建路由配置，并将其传递给 getStorybook 函数。例如，可以配置一个路由映射表：
-- -------------------- ---- -------
-- -------------------
------ - --------- - ---- -------------------
------ - ------------ - ---- -------------------
------ ------ ---- -----------
----- ----------- - -
--------- -
--------- ----
--
-------- -
----- -- -- ---
-------- -- -- ---
------- -- -- ---
------ -- -- ---
----------- -- -- ---
--
------ -
-------- -----
------- ---
----- ----
---- ----
--
--
------------ - --------- -- -
----------------------------
----- - ------- - - --------
----- ------------- - ---
----- ----------- - --------------------
--- ------ ----- -- -------- -
-- ---------------------------------- -
----- --------- - --------------------------
--------------------
---------
------- -- -- ----------
---
-
-
------ --------------
--
------------ -- -
--------------------------
-- --------然后在 Route.stories.js 中使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - ------- ----- - ---- -------------------
------ ------------- ---- -------------------------------
------ ------ ---- -------------------
------ --- ---- --------
----- ------- - ----------------
------------------ -------
--------------------- -- ------- -------------------------------------
------------ -------- -- -- -
----- ----------- - ------------------------------- ------ -- -
------ ----------- -------------------- --------------- --
---
------ -------------------------
---总结
storybook-react-router 可以方便地展示 React Router 中的路由组件，使开发者可以更加高效地进行开发。在使用时，需要对配置、渲染等内容做一定的理解和掌握，才能发挥出它的真正效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79316