面试题：Qwik中如何处理动态路由参数以实现简单路径匹配

Question

在Qwik项目中，假设存在一个用户详情页面，路由为/user/:userId，阐述如何获取:userId这个动态参数，并在页面中展示相关用户信息。请写出关键代码片段，并说明使用到的Qwik相关API。

Answer 1

1. 获取userId动态参数：
   • 在Qwik中，可以使用useRoute API来获取路由信息。
   • 关键代码片段如下：

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

export const UserDetails = component$(() => {
    const route = useRoute();
    const userId = route.params.userId;
    return (
        <div>
            <p>User ID: {userId}</p>
        </div>
    );
});

2. 展示相关用户信息：
   • 假设通过一个模拟的fetchUser函数从后端获取用户信息。
   • 关键代码片段如下：

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

const fetchUser = async (userId: string) => {
    // 实际应用中替换为真实的API请求
    return { name: 'John Doe', age: 30 };
};

export const UserDetails = component$(() => {
    const route = useRoute();
    const userId = route.params.userId;
    const [user, setUser] = useState$<{ name: string; age: number } | null>(null);

    useOnMount$(() => {
        if (userId) {
            fetchUser(userId).then((data) => {
                setUser(data);
            });
        }
    });

    return (
        <div>
            {user ? (
                <div>
                    <p>Name: {user.name}</p>
                    <p>Age: {user.age}</p>
                </div>
            ) : (
                <p>Loading user...</p>
            )}
        </div>
    );
});

使用到的Qwik相关API：

• useRoute：用于获取当前路由信息，包括动态参数等。
• useState$：用于在Qwik组件中添加状态，$表示这是一个响应式状态。
• useOnMount$：在组件挂载时执行副作用操作，比如发起数据请求。