Preact 动态路由

在现代的 Web 开发中，动态路由是单页面应用（SPA）的关键部分。Preact 提供了一个轻量级且高效的框架来构建这些应用。本章节将介绍如何使用 Preact 实现动态路由，并提供一些实际的示例来帮助你更好地理解这一概念。

引入动态路由的概念

动态路由允许我们在运行时根据 URL 参数的变化来加载不同的组件或数据。这使得我们的应用更加灵活和可扩展。通过动态路由，我们可以实现类似传统多页面应用的功能，但同时保持单页面应用的优点。

安装依赖

在开始之前，我们需要安装一些必要的库。这里我们主要会用到 preact 和 preact-router。

npm install preact preact-router

preact-router 是一个轻量级的路由库，专门为 Preact 设计，它可以帮助我们更方便地处理路由相关的问题。

创建基本路由结构

首先，我们需要创建一个简单的应用结构。假设我们有一个基本的应用布局，包括一个导航栏和一个主要内容区域。我们将使用 preact-router 来定义我们的路由规则。

创建基础组件

让我们先创建两个简单的组件：Home 和 About。

// www.javascriptcn.com code example
// Home.js
import { h } from 'preact';

export default function Home() {
  return <div>欢迎来到首页！</div>;
}

// About.js
import { h } from 'preact';

export default function About() {
  return <div>这是关于页面。</div>;
}

设置路由

接下来，我们需要设置路由来显示这两个页面。

// www.javascriptcn.com code example
// App.js
import { h, render } from 'preact';
import { Router, Route } from 'preact-router';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div>
      <nav>
        <a href="/">首页</a>
        <a href="/about">关于我们</a>
      </nav>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Router>
    </div>
  );
}

render(<App />, document.body);

在这个例子中，我们使用了 preact-router 的 <Router> 和 <Route> 组件来定义路由。当用户点击导航链接时，相应的组件将被渲染到页面上。

动态路由示例

现在，让我们来看一下如何实现动态路由。假设我们想要展示不同用户的个人资料页面。我们需要能够从 URL 中获取用户名，并根据这个信息动态地显示内容。

创建动态路由组件

首先，我们需要创建一个可以接收参数的组件：

// UserProfile.js
import { h } from 'preact';

export default function UserProfile({ username }) {
  return <div>{username} 的个人资料</div>;
}

配置动态路由

然后，在我们的主应用中配置动态路由：

// www.javascriptcn.com code example
// App.js
import { h, render } from 'preact';
import { Router, Route } from 'preact-router';
import Home from './Home';
import About from './About';
import UserProfile from './UserProfile';

function App() {
  const handleRoute = (e) => {
    e.url = e.url.replace('/user/', '');
  };

  return (
    <div>
      <nav>
        <a href="/">首页</a>
        <a href="/about">关于我们</a>
        <a href="/user/john">查看 John 的资料</a>
      </nav>
      <Router onChange={handleRoute}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/user/:username" component={UserProfile} />
      </Router>
    </div>
  );
}

render(<App />, document.body);

在这个例子中，我们通过在路由路径中使用 :username 来捕获 URL 中的参数。preact-router 会自动将匹配到的部分作为属性传递给对应的组件。

路由参数的使用

最后，我们来看看如何在组件内部使用这些路由参数。在 UserProfile 组件中，我们可以通过 props 接收 username 参数：

// UserProfile.js
import { h } from 'preact';

export default function UserProfile({ username }) {
  return <div>{username} 的个人资料</div>;
}

这样，我们就完成了动态路由的基本设置和使用。

以上就是使用 Preact 实现动态路由的一个简单教程。希望这个指南对你有所帮助，让你能够在自己的项目中有效地使用动态路由功能。