面试题：Qwik动态路由[param]语法下的嵌套路由及参数传递

Question

假设你正在开发一个博客系统，使用Qwik的[param]语法实现动态路由。要求实现文章详情页的嵌套路由，例如/articles/:articleId/comments/:commentId。阐述如何配置这样的嵌套路由，以及在不同层级组件间如何准确传递和获取这些参数。

Answer 1

配置嵌套路由

1. 创建目录结构： 在Qwik项目中，按照路由结构创建相应的目录。在src/routes目录下，创建articles目录，然后在articles目录下创建[articleId]目录（这里[articleId]表示动态参数），再在[articleId]目录下创建comments目录，最后在comments目录下创建[commentId].tsx文件。这样的目录结构就对应了/articles/:articleId/comments/:commentId的嵌套路由。
2. 设置路由配置（通常无需额外配置，目录结构即路由配置）： Qwik基于文件系统的路由机制，上述目录结构会自动映射为所需的嵌套路由。

参数传递与获取

1. 父组件传递参数给子组件： 假设articles/[articleId]/index.tsx为文章详情页组件，它要将articleId传递给comments/[commentId].tsx组件。在articles/[articleId]/index.tsx中，可以通过嵌套路由的链接来传递参数，例如：

import { useOutlet } from '@builder.io/qwik';

export default function ArticleDetails() {
  const { articleId } = useParams();
  return (
    <div>
      <h1>Article {articleId}</h1>
      {/* 传递参数到子路由 */}
      <a href={`/articles/${articleId}/comments/1`}>View Comment 1</a>
      {useOutlet()}
    </div>
  );
}

2. 子组件获取参数： 在comments/[commentId].tsx组件中，通过useParams钩子来获取参数：

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

export default function CommentDetails() {
  const { articleId, commentId } = useParams();
  return (
    <div>
      <h2>Comment {commentId} of Article {articleId}</h2>
    </div>
  );
}

这里useParams钩子会从当前路由中提取出articleId和commentId参数，供组件使用。