前言
如果你是前端开发人员，你一定知道路由是什么。路由在前端开发中非常重要，是实现单页应用的基础，这就是为什么前端框架都有自己的路由系统。@jsbit/react-unistore-router 是一个基于 unistore 和 react-router 的路由库，使用它可以更简单地实现前端路由功能。
安装
要使用 @jsbit/react-unistore-router，你需要先安装它。
打开你的终端，进入你的项目目录，然后运行如下命令：
npm install @jsbit/react-unistore-router
这将会自动安装 @jsbit/react-unistore-router 和它依赖的 unistore 和 react-router-dom。也可以使用 yarn 替代 npm。
yarn add @jsbit/react-unistore-router
开始
接下来，我们将展示如何使用 @jsbit/react-unistore-router。
路由配置
我们将路由配置写在一个单独的文件里，例如 router.js，然后导出它：
-- -------------------- ---- -------
------ ---- ---- ---------------
------ ----- ---- ----------------
------ ------- -
-
----- ----
---------- -----
------ ----
--
-
----- ---------
---------- -----
-
--这里有两个路由，一个路由是 /，另一个是 /about。exact 表示这个路由是否是精准匹配，只有当路径完全匹配时，才会渲染该路由对应的组件。
创建 store
我们创建一个 store.js 文件来存储应用程序的状态。
-- -------------------- ---- ------- ------ ----------- ---- ----------- ----- ------------ - - ------ - -- ------ ----- ------- - ----- -- -- ---------- ----- -- -- ------ ----------- - - --- ---------- ----- -- -- ------ ----------- - - -- --- ------ ------- --------------------------
这里我们使用了 unistore 库创建了一个简单的 store。我们可以在 store 中存储整个应用程序的状态。我们还定义了两个 action，increment 和 decrement，用于增加和减少计数器的值。
在应用程序中使用路由
现在我们已经有了路由配置和状态管理，下一步是将它们连接起来。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- -------------------------------
------ ------------ ---- -----------
------ ------ - ------- - ---- ----------
-------- ----- -
------ -
-----
---------- ------- --------
--------- ----------------------------
------- ----------- -- ---------------------------------------------------
------- ----------- -- ---------------------------------------------------
------
--
-
----------------
------- --------------------------- --------------
---- --
----------
-------------------------------
--我们在这里将 Router 组件作为最顶层的组件，并传递路由配置和 store。在 App 组件中，我们可以使用 store 中的状态和 action。
最后
现在你已经了解了如何使用 @jsbit/react-unistore-router 实现前端路由和状态管理。在开发应用程序时，路由和状态管理非常重要，它们将使你的应用程序更加干净和易于维护。
也可以参考仓库中的示例代码来更好地理解如何使用 @jsbit/react-unistore-router。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e3d9381d61a3540a4d