面试题：Qwik文件系统路由的基础使用

Question

在Qwik项目中，假设要创建一个简单的用户信息展示页面，路径为/user/:id，如何基于文件系统路由来实现这一路由配置？请简要描述步骤并给出关键代码片段。

Answer 1

1. 创建目录结构： 在Qwik项目的src/routes目录下，创建user文件夹。在user文件夹内，创建一个名为[id].tsx的文件。这是基于Qwik的文件系统路由规则，方括号内的部分代表动态参数。
2. 关键代码片段（[id].tsx）：

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

export const UserPage = component$(() => {
  const { id } = useParams();
  return (
    <div>
      <h1>User Information for ID: {id}</h1>
      {/* 这里可以根据id获取并展示具体的用户信息 */}
    </div>
  );
});

在上述代码中，useParams钩子函数用于获取路由中的动态参数id，然后可以根据这个id来获取并展示对应的用户信息。