面试题：Qwik路由中的动态参数处理及导航逻辑

Question

假设在Qwik应用中有一个商品详情页面，路由需要根据商品ID动态展示不同商品信息。请说明如何在路由配置中设置动态参数，以及在组件内如何获取和使用该参数进行数据加载，同时描述在不同页面间基于动态参数导航的实现逻辑。

Answer 1

1. 在路由配置中设置动态参数

在Qwik应用的路由配置中，可以使用方括号 [] 来定义动态参数。例如，如果使用 qwikCity 进行路由配置，假设路由文件结构如下：

src/routes/product/[productId]/index.tsx

这里的 [productId] 就是动态参数，表示商品ID。

2. 在组件内获取和使用该参数进行数据加载

在 index.tsx 组件内，可以通过 useRequest 钩子来获取动态参数。示例代码如下：

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

export default component$(() => {
  const { params } = useRequest();
  const productId = params.productId;

  // 数据加载逻辑，例如通过API获取商品详情
  const [product, setProduct] = useState$<Product | null>(null);
  const loadProduct = async () => {
    if (productId) {
      const response = await fetch(`/api/products/${productId}`);
      const data = await response.json();
      setProduct(data);
    }
  };

  useEffect$(() => {
    loadProduct();
  }, []);

  return (
    <div>
      {product && (
        <div>
          <h1>{product.title}</h1>
          <p>{product.description}</p>
        </div>
      )}
    </div>
  );
});

在上述代码中，通过 useRequest 钩子获取到请求参数中的 productId，然后使用 fetch 来加载对应的商品数据。

3. 不同页面间基于动态参数导航的实现逻辑

可以使用 useNavigate 钩子来实现不同页面间基于动态参数的导航。例如，在另一个组件中有一个链接跳转到商品详情页：

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

export default component$(() => {
  const navigate = useNavigate();
  const productId = '123'; // 假设这是某个商品ID

  const handleClick = () => {
    navigate(`/product/${productId}`);
  };

  return (
    <button onClick={handleClick}>查看商品详情</button>
  );
});

这里通过 useNavigate 获取导航函数，然后在点击事件中调用 navigate 并传入包含动态参数的目标路由，实现页面跳转。