前端开发过程中，开发和测试组件是非常重要的一环。而这其中，利用一款可以在开发过程中进行组件展示和交互测试工具是非常有利的。storybook-router-react 就是一个让你快速创建 storybook 实例的 npm 包，其目的是提高前端开发效率。
安装
从 npm 安装 storybook-router-react：
npm install storybook-router-react --save-dev
然后，我们需要使用到 storybook，因此，需要先安装 storybook：
npx -p @storybook/cli sb init
这时候，我们就可以开始使用 storybook-router-react。
使用
在组件中使用
在组件中引用 storybook-router-react，提供组件叙述性信息。如下面的按钮组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ---- - ---- -------------------
----- ------ - -- --------- -------- -- -- -
----- ---------- ----------------
----------
-------
--
---------------- - -
--------- --------------------------
--
------ ------- -------这时候，在 storybook 中使用这个按钮组件，需要在 .stories.js 文件中进行配置：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - ------------ - ---- -------------------
------ ------ ---- -----------
------------------- -------
------------------- -- -
------------- -----------------------
---------
---------------
--
--------------- -- -- ------- -----------------------
---------------- -- -- ------- -------- ----------------------
--这定义了两个 buttons——一个带链接的默认按钮，一个不可用的按钮，都在 MemoryRouter 之内。
在网络应用中使用
在网络应用中使用 storybook-router-react，你需要在配置中加入 Router。这样，你的所有 roads 就会与 storybook-router-react 进行关联。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ - --------- - ---- -------------------
------ - ------ - ---- -------------------------
------ - ----------- - ---- ----------------
------ - --------- - ---- --------------
------ --------------------------------
------ - ------ - ---- ------------------------- -- --------
----- ----- - -
- ----- ---- ----- ------ --
- ----- --------- ----- ------- --
- ----- ----------- ----- -------- --- --
--
------------------------ -------
------------------- -- -
---------------
---------- --------------
---------
------------
----------------
--
------------------- -- -
--------
---------
---------
-- -- -------- -- ----------------------
--------------- -- -- -
------------
--------------------------------- -- -------- -- ----------- ------
----------------- ---
----------------------
--
---这表示，story.action 链接就会与路由信息相关联。
总结
在这篇文章中，我们提供了 npm 包 storybook-router-react 的使用教程，以及在组件和网络应用中的应用实例。希望读者能够从中得到启发，加强对 storybook-router-react 的认识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673781e8991b448e3bb8