介绍
preact-router 是一个基于 preact 的路由库，提供了诸如路由匹配、导航、生命周期等功能，适用于单页面应用程序（SPA）。
在 preact 库提供的 API 基础上，preact-router 增加了对页面路由的支持，实现了对页面跳转的控制，可以方便地实现前端路由的功能。
安装
在使用 preact-router 之前，需要先安装 preact 和 preact-router 这两个 npm 包。
npm install preact preact-router --save
使用
下面将介绍 preact-router 的主要功能和用法。
Router 组件
如果你的应用程序需要实现路由功能，那么你需要使用 Router 组件来定义路由。
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - ------ - ---- ----------------
----- ---- - -- -- -
-------------
--
----- ----- - -- -- -
--------------
--
----- --- - -- -- -
--------
----- -------- --
------ ------------- --
---------
--
----------- --- ---------------在这个例子中，我们先定义了两个组件，Home 和 About，然后在 App 组件中使用了 Router 组件来定义路由。其中，path 属性指定了路由路径，当浏览器的 URL 匹配到指定的路径时，相应的组件就会被渲染。
Link 组件
在使用路由时，我们通常需要提供页面跳转的链接。preact-router 提供了 Link 组件来实现这样的链接。
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - ------- ---- - ---- ----------------
----- ---- - -- -- -
-------------
--
----- ----- - -- -- -
--------------
--
----- --- - -- -- -
-----
-----
----- --------------------
----- --------------------------
------
--------
----- -------- --
------ ------------- --
---------
------
--
----------- --- ---------------在这个例子中，我们使用了 Link 组件来定义首页和关于页面的链接。当用户点击链接时，preact-router 会自动更新浏览器的 URL，并按照指定路径渲染相应的组件。因此，在单页应用中使用 Link 组件可以不刷新页面，实现流畅的页面跳转体验。
生命周期
preact-router 提供了一些生命周期方法，用于在路由变化时进行一些操作。这些方法包括：
- onRouteChange: 路由发生变化时触发；
- onRouteFail: 路由匹配失败时触发；
- onRouteUpdate: 路由路径更新时触发，如 hash 更改；
这些方法可以通过 Router 组件的 props 进行设置。
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - ------ - ---- ----------------
----- --- - -- -- -
-------
---------------- -- -------------------- -------
-------------- -- ---------------------- -------
---------------- -- ---------------------- --------
-- ----
---------
--
----------- --- ---------------路径参数
preact-router 支持在路由路径中添加参数，用于传递动态数据。例如：
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - ------ - ---- ----------------
----- ---- - -- ---- -- -- -
---------- ------------
--
----- --- - -- -- -
--------
----- ------------------ --
-- ------
---------
--
----------- --- ---------------在这个例子中，我们定义了一个 User 组件，并在路由路径中添加了一个 name 参数，当用户访问 /user/xxx（假设 xxx 是一个具体的用户名）时，User 组件就会接收到 name 参数并进行渲染。
在组件中获取参数可以通过组件 props 来实现。
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - ------ - ---- ----------------
----- ---- - -- ---- -- -- -
---------- ------------
--
----- --- - -- -- -
--------
----- ------------------ --
---------
--
----------- --- ---------------跳转方式
preact-router 提供了两种跳转方式，即 push 和 replace。它们的区别在于是否将浏览器历史记录添加一条记录。
- push：将页面跳转到指定路径，并将该路径加入浏览器历史记录。用户可以使用浏览器的返回按钮返回到之前的页面；
- replace：将当前页面的 URL 替换为指定路径，并不会加入浏览器历史记录。用户不能使用浏览器的返回按钮返回到之前的页面；
在代码中使用这两种方式可以通过 Router 组件的 pushState 和 replaceState 属性来设置。例如：
-- -------------------- ---- -------
------ - -- ------ - ---- ---------
------ - ------- ---- - ---- ----------------
----- ---- - -- -- -
-----
-------------
------- ----------- -- -------------------- - ------------- ------------- -------------
----- --------------------------- -----------------
------- ----------- -- ------------------ - -------- ---- ----------------- ----------------------
------
--
----- ----- - -- -- -
--------------
--
----- --- - -- -- -
-----
-----
----- --------------------
----- --------------------------
------
--------
----- -------- --
------ ------------- --
---------
------
--
----------- --- ---------------在这个例子中，我们在 Home 组件中提供了三种页面跳转方式，分别是直接跳转、使用 preact-router push 方式进行跳转、使用 preact-router replace 方式进行跳转。
总结
本文介绍了 npm 包 preact-router 的使用方法，包括 Router 组件、Link 组件、生命周期、路径参数和跳转方式等。这些内容可以帮助你快速地实现前端路由的功能，并提升用户的页面跳转体验。
preact-router 的使用非常简单，而且对于轻量级应用程序来说，它非常适合。如果你正在开发一个单页应用程序，不妨试试 preact-router。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/93706