在本章节中，我们将深入探讨如何使用Preact框架和其路由库preact-router来构建动态的单页面应用。我们将从基础开始，逐步介绍如何安装和配置preact-router，并通过一系列示例演示如何创建路由、处理参数以及实现导航功能。
安装与配置
首先，我们需要确保你的项目已经安装了Preact和preact-router。如果你还没有创建项目，请使用以下命令初始化一个新的npm项目：
npm init -y
接下来，安装Preact及其相关依赖：
npm install preact preact-compat preact-router
这里我们安装了preact-compat库，以便我们可以更轻松地使用React生态中的组件和工具。虽然Preact本身是React的一个轻量级替代品，但有时直接使用preact-combat可以简化迁移过程。
引入必要的模块
在你的项目入口文件中，比如index.js或App.js，你需要引入Preact和preact-router的相关模块。例如：
import { h, render } from 'preact';
import { Router, Route } from 'preact-router';创建基本路由
接下来，让我们创建一个简单的应用结构，该应用包含几个不同的页面。我们将使用Router组件作为所有页面的容器，并通过Route组件定义每个单独的视图。
定义路由组件
首先，定义几个简单的组件，这些组件将作为我们的路由目标：
const Home = () => <h1>首页</h1>; const About = () => <h1>关于我们</h1>; const Contact = () => <h1>联系我们</h1>;
然后，在主应用组件中使用Router和Route来配置这些组件的路由：
const App = () => (
<Router>
<Home path="/" />
<About path="/about" />
<Contact path="/contact" />
</Router>
);上述代码中，<Router>组件会根据当前URL匹配相应的子<Route>组件，并渲染对应的页面。
路由参数与动态路由
除了静态路径之外，preact-router还支持动态路由，这意味着你可以为某些路由定义变量部分，从而使得URL更加灵活。
动态路由示例
假设我们需要展示一个用户详情页，可以通过ID来访问特定用户的资料。我们可以在路由中添加一个参数，如下所示：
const UserDetail = ({ userId }) => <h1>用户详情：{userId}</h1>;
const App = () => (
<Router>
<UserDetail path="/users/:userId" />
</Router>
);在这个例子中，:userId是一个动态参数，它会在匹配到相应路由时被传递给UserDetail组件。在组件内部，你可以通过props来访问这个参数。
使用Link进行导航
为了使用户能够方便地在不同页面之间切换，我们可以利用Link组件来创建导航链接。Link组件允许我们指定一个to属性，该属性定义了点击链接后应跳转到的路径。
-- -------------------- ---- -------
------ - ---- - ---- ----------------
----- ------ - -- -- -
-----
----- ------------------
----- -------------------------
----- ---------------------------
------
--将Navbar组件嵌入到你的应用布局中，这样就能提供一个简单的导航栏。
总结
本章介绍了如何使用Preact结合preact-router来构建基本的单页面应用。我们从安装和配置开始，逐步讲解了如何定义静态和动态路由，以及如何通过Link组件来实现页面间的导航。接下来，我们将进一步探索preact-router的高级功能，如路由守卫、错误处理等，以帮助你构建更为复杂的应用程序。