MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Qwik动态路由在实际项目中的应用场景

2021-12-242.0k 阅读

Qwik 动态路由在实际项目中的应用场景

动态路由基础概念

在深入探讨 Qwik 动态路由在实际项目中的应用场景之前，我们先来理解一下什么是动态路由。动态路由是指在应用程序运行时，根据不同的条件动态地生成路由规则。与静态路由（在代码中预先定义好固定的路由映射）不同，动态路由具有更高的灵活性，能够根据用户输入、数据状态或其他运行时因素来决定如何导航到不同的页面或视图。

在 Qwik 框架中，动态路由通过其路由系统来实现。Qwik 的路由系统基于文件系统，这意味着项目中的文件结构直接映射到应用的路由结构。例如，在项目的 src/routes 目录下的文件和文件夹结构会自动转换为相应的路由。

Qwik 动态路由的实现原理

Qwik 使用基于文件系统的路由策略，这是其动态路由实现的核心基础。假设我们有一个简单的项目结构：

src/
└── routes/
    ├── index.tsx
    ├── about.tsx
    └── blog/
        ├── [slug].tsx

在这个结构中，index.tsx 对应应用的根路由 /，about.tsx 对应 /about 路由。而 blog/[slug].tsx 则是一个动态路由。这里的 [slug] 是一个动态参数，它可以代表博客文章的唯一标识，比如文章的标题经过处理后的字符串。

当用户访问类似 /blog/hello-world 这样的 URL 时，Qwik 会匹配到 blog/[slug].tsx 这个路由文件，并将 hello-world 作为 slug 参数传递给该组件。

在 blog/[slug].tsx 组件中，我们可以这样获取参数：

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

export const BlogPost = component$(() => {
    const { params } = useRoute();
    const slug = params.slug;

    return (
        <div>
            <h1>Blog Post: {slug}</h1>
            {/* 此处根据 slug 从后端获取文章内容并展示 */}
        </div>
    );
});

这里通过 useRoute 钩子函数获取到路由参数，从而能够根据不同的 slug 展示不同的博客文章内容。

电子商务项目中的应用场景

  1. 产品详情页 在电子商务项目中，每个产品都需要有一个独立的详情页面。使用 Qwik 的动态路由，我们可以轻松实现这一点。假设我们有一个产品列表，每个产品都有一个唯一的 productId。 项目结构如下：
src/
└── routes/
    ├── products/
        ├── [productId].tsx

在 products/[productId].tsx 组件中：

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

export const ProductDetail = component$(() => {
    const { params } = useRoute();
    const productId = params.productId;
    const [product, setProduct] = useState$<Product | null>(null);

    useOnMount$(() => {
        async function fetchProduct() {
            const data = await getProductById(productId);
            setProduct(data);
        }
        fetchProduct();
    });

    return (
        <div>
            {product && (
                <div>
                    <h1>{product.title}</h1>
                    <p>{product.description}</p>
                    <img src={product.imageUrl} alt={product.title} />
                </div>
            )}
        </div>
    );
});

这里通过动态路由获取 productId，然后从后端 API getProductById 获取产品详细信息并展示。这样，无论有多少产品，都可以通过动态路由实现每个产品的独立详情页。

  1. 购物车页面动态更新 购物车页面也可以借助动态路由的思想进行优化。假设我们希望在购物车页面展示不同的促销活动信息，这些促销活动可能根据用户的购买历史、会员等级等动态因素而变化。 我们可以创建一个动态路由 src/routes/cart/[promotionCode].tsx。
import { component$, useRoute } from '@builder.io/qwik';
import { getPromotionDetails } from '../api/promotions';

export const CartPage = component$(() => {
    const { params } = useRoute();
    const promotionCode = params.promotionCode;
    const [promotion, setPromotion] = useState$<Promotion | null>(null);

    useOnMount$(() => {
        async function fetchPromotion() {
            const data = await getPromotionDetails(promotionCode);
            setPromotion(data);
        }
        fetchPromotion();
    });

    return (
        <div>
            <h1>Shopping Cart</h1>
            {promotion && (
                <div>
                    <h2>Promotion: {promotion.title}</h2>
                    <p>{promotion.description}</p>
                </div>
            )}
            {/* 购物车商品列表等其他内容 */}
        </div>
    );
});

在实际应用中，promotionCode 可以根据用户的各种条件动态生成，然后通过动态路由展示不同的促销信息，为用户提供个性化的购物车体验。

内容管理系统（CMS）项目中的应用场景

  1. 文章展示与分类 在 CMS 项目中，文章展示是一个常见的需求。文章可能有不同的分类，比如技术文章、生活随笔等。我们可以利用 Qwik 的动态路由来实现文章的分类展示。 项目结构如下：
src/
└── routes/
    ├── articles/
        ├── [category]/
            ├── [articleId].tsx

在 articles/[category]/[articleId].tsx 组件中：

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

export const ArticlePage = component$(() => {
    const { params } = useRoute();
    const category = params.category;
    const articleId = params.articleId;
    const [article, setArticle] = useState$<Article | null>(null);

    useOnMount$(() => {
        async function fetchArticle() {
            const data = await getArticleById(articleId);
            setArticle(data);
        }
        fetchArticle();
    });

    return (
        <div>
            <h1>{article && article.title}</h1>
            <p>Category: {category}</p>
            {article && <div dangerouslySetInnerHTML={{ __html: article.content }} />}
        </div>
    );
});

这样，通过动态路由，我们可以方便地根据文章的分类和 ID 展示不同的文章内容。用户可以通过类似 /articles/technology/123 的 URL 访问到特定分类下的具体文章。

  1. 动态页面生成 有些 CMS 可能需要根据用户在后台创建的页面模板动态生成前端页面。例如，用户创建了一个关于公司介绍的页面模板，并且在后台配置了一些内容块。 我们可以创建一个动态路由 src/routes/custom-pages/[pageId].tsx。
import { component$, useRoute } from '@builder.io/qwik';
import { getPageById } from '../api/customPages';

export const CustomPage = component$(() => {
    const { params } = useRoute();
    const pageId = params.pageId;
    const [page, setPage] = useState$<CustomPageData | null>(null);

    useOnMount$(() => {
        async function fetchPage() {
            const data = await getPageById(pageId);
            setPage(data);
        }
        fetchPage();
    });

    return (
        <div>
            {page && (
                <div>
                    <h1>{page.title}</h1>
                    {page.contentBlocks.map((block, index) => (
                        <div key={index}>
                            {/* 根据 block 类型渲染不同内容，比如文本块、图片块等 */}
                            {block.type === 'text' && <p>{block.text}</p>}
                            {block.type === 'image' && <img src={block.imageUrl} alt={block.altText} />}
                        </div>
                    ))}
                </div>
            )}
        </div>
    );
});

通过这种方式，CMS 可以根据不同的 pageId 动态生成各种自定义页面，满足多样化的页面展示需求。

多租户应用项目中的应用场景

  1. 租户特定页面 在多租户应用中，每个租户可能需要有一些特定的页面，比如租户的品牌展示页面、租户的设置页面等。利用 Qwik 的动态路由，我们可以为每个租户创建独立的页面。 假设项目结构如下：
src/
└── routes/
    ├── tenants/
        ├── [tenantId]/
            ├── brand.tsx
            ├── settings.tsx

在 tenants/[tenantId]/brand.tsx 组件中：

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

export const TenantBrandPage = component$(() => {
    const { params } = useRoute();
    const tenantId = params.tenantId;
    const [brandInfo, setBrandInfo] = useState$<TenantBrand | null>(null);

    useOnMount$(() => {
        async function fetchBrandInfo() {
            const data = await getTenantBrandInfo(tenantId);
            setBrandInfo(data);
        }
        fetchBrandInfo();
    });

    return (
        <div>
            {brandInfo && (
                <div>
                    <h1>{brandInfo.brandName}</h1>
                    <img src={brandInfo.logoUrl} alt={brandInfo.brandName} />
                    <p>{brandInfo.description}</p>
                </div>
            )}
        </div>
    );
});

通过动态路由获取 tenantId，然后从后端获取每个租户特定的品牌信息并展示。这样不同租户的用户访问 /tenants/123/brand 和 /tenants/456/brand 会看到各自租户的品牌页面。

  1. 租户动态子路由 除了固定的租户特定页面，有些情况下租户可能需要根据自身业务逻辑动态生成子路由。例如，一个电商租户可能需要为每个促销活动创建一个独立的页面。 我们可以在 tenants/[tenantId] 目录下创建一个动态子路由 promotions/[promotionId].tsx。
import { component$, useRoute } from '@builder.io/qwik';
import { getTenantPromotion } from '../api/tenants';

export const TenantPromotionPage = component$(() => {
    const { params } = useRoute();
    const tenantId = params.tenantId;
    const promotionId = params.promotionId;
    const [promotion, setPromotion] = useState$<TenantPromotion | null>(null);

    useOnMount$(() => {
        async function fetchPromotion() {
            const data = await getTenantPromotion(tenantId, promotionId);
            setPromotion(data);
        }
        fetchPromotion();
    });

    return (
        <div>
            {promotion && (
                <div>
                    <h1>{promotion.title}</h1>
                    <p>{promotion.description}</p>
                    {/* 促销活动相关展示内容 */}
                </div>
            )}
        </div>
    );
});

这样，租户可以根据自身需求动态创建和管理各种促销活动页面，通过动态路由实现个性化的业务功能。

单页应用（SPA）导航优化中的应用场景

  1. 基于用户角色的导航 在单页应用中，不同用户角色可能有不同的导航菜单和可访问页面。例如，在一个企业内部管理系统中，管理员角色可以访问用户管理、权限设置等页面，而普通员工只能访问自己的工作任务页面。 我们可以利用 Qwik 的动态路由来实现基于用户角色的导航。假设项目结构如下：
src/
└── routes/
    ├── [role]/
        ├── dashboard.tsx
        ├── users/
            ├── list.tsx
            ├── [userId].tsx

在 [role]/dashboard.tsx 组件中，根据不同的 role 渲染不同的内容：

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

export const DashboardPage = component$(() => {
    const { params } = useRoute();
    const role = params.role;

    return (
        <div>
            <h1>{role === 'admin'? 'Admin Dashboard' : 'Employee Dashboard'}</h1>
            {/* 根据 role 渲染不同的导航和内容 */}
        </div>
    );
});

通过这种方式，用户根据其登录角色，访问不同的路由，如 /admin/dashboard 或 /employee/dashboard，从而实现个性化的导航体验。

  1. 动态加载内容块 在 SPA 中，为了提高性能，我们可能希望根据用户的操作动态加载某些内容块，而不是一次性加载所有内容。例如，在一个文档管理系统中，用户在查看文档列表时，点击某个文档后才加载该文档的详细内容。 我们可以创建一个动态路由 src/routes/documents/[documentId]/details.tsx。
import { component$, useRoute } from '@builder.io/qwik';
import { getDocumentDetails } from '../api/documents';

export const DocumentDetailsPage = component$(() => {
    const { params } = useRoute();
    const documentId = params.documentId;
    const [documentDetails, setDocumentDetails] = useState$<DocumentDetails | null>(null);

    useOnMount$(() => {
        async function fetchDocumentDetails() {
            const data = await getDocumentDetails(documentId);
            setDocumentDetails(data);
        }
        fetchDocumentDetails();
    });

    return (
        <div>
            {documentDetails && (
                <div>
                    <h1>{documentDetails.title}</h1>
                    <p>{documentDetails.content}</p>
                </div>
            )}
        </div>
    );
});

当用户点击文档列表中的某个文档时，通过动态路由加载该文档的详细内容，避免了初始加载时不必要的内容加载，提升了应用的性能和用户体验。

实现动态路由时的注意事项

  1. 路由参数验证 在使用动态路由时，对路由参数进行验证是非常重要的。例如，在产品详情页的动态路由中，productId 应该是一个有效的 ID 格式。我们可以在获取参数后进行验证：
import { component$, useRoute } from '@builder.io/qwik';
import { getProductById } from '../api/products';

export const ProductDetail = component$(() => {
    const { params } = useRoute();
    const productId = params.productId;
    const isValidProductId = /^\d+$/.test(productId);

    if (!isValidProductId) {
        return <div>Invalid product ID</div>;
    }

    const [product, setProduct] = useState$<Product | null>(null);

    useOnMount$(() => {
        async function fetchProduct() {
            const data = await getProductById(productId);
            setProduct(data);
        }
        fetchProduct();
    });

    return (
        <div>
            {product && (
                <div>
                    <h1>{product.title}</h1>
                    <p>{product.description}</p>
                    <img src={product.imageUrl} alt={product.title} />
                </div>
            )}
        </div>
    );
});

这样可以避免因无效参数导致的错误和异常。

  1. SEO 友好性 对于需要考虑 SEO 的项目，动态路由的 URL 结构应该尽量简洁且有意义。例如，在文章展示的动态路由中，[articleId] 可以替换为更具描述性的 [articleSlug]，这样搜索引擎更容易理解页面内容。同时，要确保每个动态页面都有合适的元数据（如标题、描述等），可以根据动态参数从后端获取并设置。
import { component$, useRoute } from '@builder.io/qwik';
import { getArticleBySlug } from '../api/articles';

export const ArticlePage = component$(() => {
    const { params } = useRoute();
    const articleSlug = params.articleSlug;
    const [article, setArticle] = useState$<Article | null>(null);

    useOnMount$(() => {
        async function fetchArticle() {
            const data = await getArticleBySlug(articleSlug);
            setArticle(data);
        }
        fetchArticle();
    });

    useEffect$(() => {
        if (article) {
            document.title = article.title;
            const metaDescription = document.createElement('meta');
            metaDescription.name = 'description';
            metaDescription.content = article.excerpt;
            document.head.appendChild(metaDescription);
        }
    }, [article]);

    return (
        <div>
            <h1>{article && article.title}</h1>
            {article && <div dangerouslySetInnerHTML={{ __html: article.content }} />}
        </div>
    );
});
  1. 路由嵌套与层级管理 在复杂项目中，可能会有多层动态路由嵌套的情况。例如，在一个电商项目中，产品详情页可能还有子路由，如 /products/123/reviews 用于展示产品评论。在这种情况下，要确保路由嵌套的逻辑清晰，并且在组件之间能够正确传递参数。 假设我们有如下项目结构：
src/
└── routes/
    ├── products/
        ├── [productId]/
            ├── index.tsx
            ├── reviews/
                ├── index.tsx

在 products/[productId]/reviews/index.tsx 组件中获取父路由的 productId：

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

export const ProductReviewsPage = component$(() => {
    const { params } = useRoute();
    const productId = params.productId;
    const [reviews, setReviews] = useState$<Review[]>([]);

    useOnMount$(() => {
        async function fetchReviews() {
            const data = await getProductReviews(productId);
            setReviews(data);
        }
        fetchReviews();
    });

    return (
        <div>
            <h1>Reviews for Product {productId}</h1>
            {reviews.map((review, index) => (
                <div key={index}>
                    <p>{review.author}: {review.comment}</p>
                </div>
            ))}
        </div>
    );
});

通过合理的路由嵌套和参数传递管理，可以实现复杂的页面结构和功能。

  1. 性能优化 虽然动态路由提供了灵活性，但在实际应用中也需要注意性能优化。例如，避免在动态路由组件的 useOnMount$ 中进行过多的同步操作，尽量将数据获取等异步操作放在 useOnMount$ 内部。同时，如果动态路由组件有大量的渲染逻辑，可以考虑使用 Qwik 的 shouldUpdate$ 钩子函数来控制组件的更新，避免不必要的重新渲染。
import { component$, useRoute, shouldUpdate$ } from '@builder.io/qwik';
import { getProductById } from '../api/products';

export const ProductDetail = component$(() => {
    const { params } = useRoute();
    const productId = params.productId;
    const [product, setProduct] = useState$<Product | null>(null);

    useOnMount$(() => {
        async function fetchProduct() {
            const data = await getProductById(productId);
            setProduct(data);
        }
        fetchProduct();
    });

    shouldUpdate$((prevProps, nextProps) => {
        // 只有当 productId 变化时才更新组件
        return prevProps.productId!== nextProps.productId;
    });

    return (
        <div>
            {product && (
                <div>
                    <h1>{product.title}</h1>
                    <p>{product.description}</p>
                    <img src={product.imageUrl} alt={product.title} />
                </div>
            )}
        </div>
    );
});

通过这些性能优化手段，可以确保动态路由在实际项目中的高效运行。

通过以上对 Qwik 动态路由在不同实际项目场景中的应用介绍以及注意事项的说明，我们可以看到 Qwik 的动态路由为前端开发带来了极大的灵活性和实用性，能够满足各种复杂的业务需求，同时通过合理的优化可以保证应用的性能和用户体验。在实际项目开发中，开发者可以根据具体需求充分利用 Qwik 动态路由的特性，打造出高效、灵活且用户体验良好的前端应用。