引言
对于一个前端开发者来说，如何更好地实现路由功能是非常重要的问题。因此，我们需要使用到一些会带来方便的 npm 包，在本篇文章中，我们将讲解如何使用一个简单易用的 npm 包 -- super-simple-react-router。
什么是 super-simple-react-router
Super-simple-react-router 是一个轻量级的基于 React Router 的 TypeScript npm 包，它的设计目的是为了帮助开发者快速实现路由功能，具有简单易用、高扩展性等特点。
安装与配置
使用 npm 安装 super-simple-react-router：
npm install super-simple-react-router
在 App.tsx 里面添加如下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- ----------------------------
------ ---- ---- --------------
------ ----- ---- ---------------
-------- ----- -
------ -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
--
-
------ ------- ----如上述代码所示，我们在 App.tsx 中使用了 Router 和 Route 组件，其中 Home 和 About 分别为两个页面组件，这里的 exact 是指精确匹配。
页面跳转
现在我们已经可以实现路由功能，接下来就是如何在页面之间跳转。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ----------------------------
-------- ------ -
------ -
-----
----------- -- --- ---- ---------
----- ------------------------
------
--
-
------ ------- -----在 Home 页面中，我们使用了 super-simple-react-router 的 Link 组件，并把 to 属性设置为我们想要跳转的页面，这里是 About 页面。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ----------------------------
-------- ------- -
----- ------- - -------------
-------- ------------- -
------------------
-
------ -
-----
--------------
------- ------------------------ ---- -- -------------
------
--
-
------ ------- ------在 About 页面中，我们使用了 useHistory 方法来获取 history 对象，并在 handleClick 方法中使用 push 方法进行页面跳转。
总结
至此，我们已经学习了如何使用 super-simple-react-router 这个 npm 包来实现简单易用的路由功能。相对于 React Router，super-simple-react-router 更加轻量级、易用，非常适合初学者使用。值得一提的是，super-simple-react-router 同样具有高扩展性，如果需要复杂的路由功能，也可以在其基础上进一步开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005615a81e8991b448df43f