面试题：Qwik中动态路由的基本实现方式

Question

在Qwik项目中，阐述动态路由是如何通过基础配置和代码来实现的，举例说明动态路由参数的传递与接收过程。

Answer 1

1. 动态路由在Qwik项目中的基础配置

在Qwik项目中，动态路由通常基于文件系统结构来配置。例如，假设项目的路由目录结构如下：

src/routes
├── index.tsx
├── users
│   ├── index.tsx
│   └── [id].tsx

上述结构中，src/routes 是路由的根目录。index.tsx 对应项目的根路由。在 users 子目录中，index.tsx 对应 /users 路由，而 [id].tsx 则是动态路由，其中 [id] 是动态参数。

2. 动态路由在代码中的实现

在 [id].tsx 文件中，Qwik使用 useRouteParams 钩子函数来获取动态路由参数。以下是一个简单的示例：

import { component$, useRouteParams } from '@builder.io/qwik';

export default component$(() => {
  const { id } = useRouteParams();
  return <div>User ID: {id}</div>;
});

在上述代码中，通过 useRouteParams 钩子函数获取到包含所有动态路由参数的对象，然后从中解构出 id 参数，并将其显示在页面上。

3. 动态路由参数的传递过程

假设在另一个组件中要导航到这个动态路由，并传递参数。例如，在 users/index.tsx 组件中：

import { component$, useNavigate } from '@builder.io/qwik';

export default component$(() => {
  const navigate = useNavigate();
  const handleClick = (userId: string) => {
    navigate(`/users/${userId}`);
  };

  return (
    <div>
      <button onClick={() => handleClick('123')}>View User 123</button>
    </div>
  );
});

在上述代码中，通过 useNavigate 钩子函数获取到导航函数 navigate。当按钮被点击时，调用 navigate 函数并传入包含动态参数的路径 /users/${userId}，这里 userId 为 '123'，从而实现动态路由参数的传递。

4. 动态路由参数的接收过程

回到 [id].tsx 组件，当导航到 /users/123 时，useRouteParams 钩子函数会获取到动态路由参数。此时 { id } 中的 id 值为 '123'，并显示在页面上。这就是动态路由参数的接收过程。