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

Qwik路由与导航的集成：构建高效的单页面应用

2024-05-225.1k 阅读

理解 Qwik 路由基础

在构建现代单页面应用（SPA）时，路由是一个关键的组成部分。Qwik 提供了一套简洁且高效的路由系统，使得开发者能够轻松地管理页面之间的导航和状态切换。

Qwik 的路由基于文件系统结构。在项目的 src/routes 目录下，每个文件或目录都对应一个路由。例如，创建一个 src/routes/home.tsx 文件，它将对应于应用的 /home 路由。这种基于文件系统的路由方式有几个显著优点。首先，它非常直观，开发者可以直接通过文件结构来理解应用的路由层次。其次，它有助于代码的组织和维护，因为每个路由相关的代码都可以放在对应的文件中。

简单路由示例

假设我们正在构建一个简单的博客应用。我们可以在 src/routes 目录下创建以下文件结构：

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

在这个结构中，src/routes/index.tsx 可以作为应用的首页。其代码可能如下：

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

const HomePage = component$(() => {
    const location = useLocation();
    return (
        <div>
            <h1>Welcome to My Blog</h1>
            <p>Current location: {location.pathname}</p>
        </div>
    );
});

export default HomePage;

这里我们使用了 useLocation 钩子来获取当前的路由位置信息，并在页面上显示出来。

src/routes/blog/index.tsx 可以作为博客列表页：

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

const BlogListPage = component$(() => {
    return (
        <div>
            <h1>Blog List</h1>
            <p>This is the list of all blog posts.</p>
        </div>
    );
});

export default BlogListPage;

而 src/routes/blog/[slug].tsx 用于显示单个博客文章。[slug] 是一个动态路由参数，它可以匹配任何字符串。代码示例如下：

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

const BlogPostPage = component$(() => {
    const { slug } = useRouteParams();
    return (
        <div>
            <h1>Blog Post: {slug}</h1>
            <p>This is the content of the blog post with slug {slug}.</p>
        </div>
    );
});

export default BlogPostPage;

在这个页面中，我们使用 useRouteParams 钩子来获取动态路由参数 slug，并在页面上显示出来。

导航实现

有了路由定义之后，我们需要在应用中实现导航功能。Qwik 提供了 <Link> 组件来实现页面之间的导航。<Link> 组件会在点击时触发路由切换，而不会重新加载整个页面，这是单页面应用的核心特性之一。

使用 <Link> 组件

继续以我们的博客应用为例，在 HomePage 中添加导航到博客列表页的链接：

import { component$, useLocation } from '@builder.io/qwik';
import { Link } from '@builder.io/qwik-city';

const HomePage = component$(() => {
    const location = useLocation();
    return (
        <div>
            <h1>Welcome to My Blog</h1>
            <p>Current location: {location.pathname}</p>
            <Link to="/blog">Go to Blog List</Link>
        </div>
    );
});

export default HomePage;

在 BlogListPage 中，我们可以添加链接到单个博客文章页面。假设我们有一个模拟的博客文章列表数据：

import { component$ } from '@builder.io/qwik';
import { Link } from '@builder.io/qwik-city';

const blogPosts = [
    { slug: 'first - post', title: 'First Blog Post' },
    { slug: 'second - post', title: 'Second Blog Post' }
];

const BlogListPage = component$(() => {
    return (
        <div>
            <h1>Blog List</h1>
            <ul>
                {blogPosts.map(post => (
                    <li key={post.slug}>
                        <Link to={`/blog/${post.slug}`}>{post.title}</Link>
                    </li>
                ))}
            </ul>
        </div>
    );
});

export default BlogListPage;

这样，用户就可以通过点击链接在不同页面之间进行导航。

编程式导航

除了使用 <Link> 组件，Qwik 还支持编程式导航。这在某些情况下非常有用，比如在表单提交后导航到另一个页面，或者根据用户的操作动态决定导航的目标。

Qwik 提供了 useNavigate 钩子来实现编程式导航。例如，我们可以在一个按钮的点击事件中使用它：

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

const NavigateExample = component$(() => {
    const navigate = useNavigate();
    const handleClick = () => {
        navigate('/blog');
    };
    return (
        <div>
            <button onClick={handleClick}>Go to Blog List (Programmatically)</button>
        </div>
    );
});

export default NavigateExample;

在这个例子中，当按钮被点击时，handleClick 函数会调用 navigate 并传入目标路由 /blog，从而实现导航。

路由嵌套

在实际应用中，路由嵌套是一个常见的需求。Qwik 对路由嵌套提供了很好的支持。

创建嵌套路由

回到我们的博客应用，假设我们希望在博客文章页面中添加一个评论部分，并且评论部分有自己的子路由，比如 /blog/[slug]/comments。我们可以在 src/routes/blog/[slug] 目录下创建一个 comments 目录，并在其中创建 index.tsx 文件。

src/routes/blog/[slug]/comments/index.tsx 的代码如下：

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

const CommentsPage = component$(() => {
    return (
        <div>
            <h2>Comments for this Blog Post</h2>
            <p>This is the comments section.</p>
        </div>
    );
});

export default CommentsPage;

同时，在 src/routes/blog/[slug]/index.tsx 中，我们需要添加一个 <Outlet> 组件来渲染子路由：

import { component$, useRouteParams } from '@builder.io/qwik';
import { Outlet } from '@builder.io/qwik-city';

const BlogPostPage = component$(() => {
    const { slug } = useRouteParams();
    return (
        <div>
            <h1>Blog Post: {slug}</h1>
            <p>This is the content of the blog post with slug {slug}.</p>
            <Outlet />
        </div>
    );
});

export default BlogPostPage;

<Outlet> 组件是 Qwik 用于渲染子路由的关键组件。当用户访问 /blog/first - post/comments 时，CommentsPage 将会在 <Outlet> 的位置渲染。

嵌套路由导航

在 BlogPostPage 中，我们可以添加一个链接来导航到评论页面：

import { component$, useRouteParams } from '@builder.io/qwik';
import { Link, Outlet } from '@builder.io/qwik-city';

const BlogPostPage = component$(() => {
    const { slug } = useRouteParams();
    return (
        <div>
            <h1>Blog Post: {slug}</h1>
            <p>This is the content of the blog post with slug {slug}.</p>
            <Link to={`${slug}/comments`}>View Comments</Link>
            <Outlet />
        </div>
    );
});

export default BlogPostPage;

这样，用户可以在博客文章页面点击链接导航到评论页面，并且整个导航过程依然保持单页面应用的特性，不会重新加载整个页面。

路由守卫

路由守卫在应用开发中起着重要的作用，它可以在导航发生之前或之后执行一些逻辑，比如验证用户是否登录、检查权限等。

全局路由守卫

Qwik 支持全局路由守卫。我们可以通过创建一个 src/routes/_layout.tsx 文件来定义全局路由守卫。例如，假设我们希望在所有路由导航之前检查用户是否登录：

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

const Layout = component$(() => {
    const navigate = useNavigate();
    onBeforeNavigation$(({ to }) => {
        const isLoggedIn = false; // 这里可以替换为实际的登录状态检查逻辑
        if (!isLoggedIn && to.pathname!== '/login') {
            navigate('/login');
            return false;
        }
        return true;
    });
    return (
        <div>
            {/* 应用的全局布局 */}
        </div>
    );
});

export default Layout;

在这个例子中，onBeforeNavigation$ 函数会在每次导航发生之前被调用。如果用户未登录且当前导航目标不是 /login 页面，那么会导航到 /login 页面，并阻止当前导航。

局部路由守卫

除了全局路由守卫，Qwik 还支持局部路由守卫。我们可以在单个路由组件中定义局部路由守卫。例如，在 src/routes/admin/dashboard.tsx 中，我们希望只有管理员用户才能访问该页面：

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

const DashboardPage = component$(() => {
    const navigate = useNavigate();
    onBeforeNavigation$(({ to }) => {
        const isAdmin = false; // 这里可以替换为实际的管理员权限检查逻辑
        if (!isAdmin) {
            navigate('/forbidden');
            return false;
        }
        return true;
    });
    return (
        <div>
            <h1>Admin Dashboard</h1>
            <p>This is the admin dashboard.</p>
        </div>
    );
});

export default DashboardPage;

这样，当用户尝试导航到 /admin/dashboard 页面时，会先执行局部路由守卫中的逻辑，如果用户不是管理员，则会被导航到 /forbidden 页面。

路由状态管理

在单页面应用中，路由状态管理是一个重要的方面。Qwik 提供了一些机制来帮助我们管理路由相关的状态。

路由参数与状态同步

我们已经知道可以通过 useRouteParams 钩子获取动态路由参数。有时候，我们希望将这些参数与组件的状态进行同步。例如，在 src/routes/products/[productId].tsx 中，我们可以这样做：

import { component$, useState } from '@builder.io/qwik';
import { useRouteParams } from '@builder.io/qwik-city';

const ProductPage = component$(() => {
    const { productId } = useRouteParams();
    const [product, setProduct] = useState(null);
    // 这里可以根据 productId 加载产品数据
    return (
        <div>
            <h1>Product: {productId}</h1>
            {product && <p>{product.description}</p>}
        </div>
    );
});

export default ProductPage;

在这个例子中，productId 是路由参数，我们可以根据它来加载相应的产品数据，并将产品数据存储在 product 状态中。

导航与状态更新

当进行导航时，有时候我们需要更新应用的状态。例如，在一个多步骤表单应用中，当用户完成一个步骤并导航到下一个步骤时，我们需要更新表单的进度状态。

假设我们有一个 src/routes/form/step1.tsx 和 src/routes/form/step2.tsx，在 step1.tsx 中：

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

const Step1 = component$(() => {
    const { formProgress, setFormProgress } = useFormState();
    const navigate = useNavigate();
    const handleNext = () => {
        setFormProgress(1);
        navigate('/form/step2');
    };
    return (
        <div>
            <h1>Step 1</h1>
            <button onClick={handleNext}>Next</button>
        </div>
    );
});

export default Step1;

在 step2.tsx 中：

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

const Step2 = component$(() => {
    const { formProgress, setFormProgress } = useFormState();
    const navigate = useNavigate();
    const handlePrevious = () => {
        setFormProgress(0);
        navigate('/form/step1');
    };
    return (
        <div>
            <h1>Step 2</h1>
            <button onClick={handlePrevious}>Previous</button>
        </div>
    );
});

export default Step2;

这里 useFormState 是一个自定义钩子，用于管理表单的进度状态。在导航时，我们通过更新 formProgress 状态来反映表单的当前步骤。

处理 404 页面

在任何应用中，处理 404 页面（未找到页面）都是必不可少的。Qwik 提供了一种简单的方式来定义 404 页面。

创建 404 页面

我们可以在 src/routes 目录下创建一个 404.tsx 文件。其代码如下：

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

const NotFoundPage = component$(() => {
    return (
        <div>
            <h1>404 - Page Not Found</h1>
            <p>The page you are looking for could not be found.</p>
        </div>
    );
});

export default NotFoundPage;

当用户访问一个不存在的路由时，Qwik 会自动渲染 404.tsx 页面。

自定义 404 逻辑

在某些情况下，我们可能需要在 404 页面中添加一些自定义逻辑，比如记录错误日志、提供搜索功能等。例如，我们可以在 404.tsx 中添加一个搜索框，帮助用户找到他们想要的内容：

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

const NotFoundPage = component$(() => {
    const [searchQuery, setSearchQuery] = useState('');
    const handleSearch = () => {
        // 这里可以添加搜索逻辑，比如导航到搜索结果页面
    };
    return (
        <div>
            <h1>404 - Page Not Found</h1>
            <p>The page you are looking for could not be found.</p>
            <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Search for what you need"
            />
            <button onClick={handleSearch}>Search</button>
        </div>
    );
});

export default NotFoundPage;

这样，用户在遇到 404 页面时，可以尝试通过搜索来找到相关内容。

与后端集成

在实际项目中，前端路由通常需要与后端进行交互，比如获取数据、提交表单等。

获取路由相关数据

假设我们有一个后端 API 用于获取博客文章数据。在 src/routes/blog/[slug].tsx 中，我们可以在组件加载时通过 fetch 来获取文章数据：

import { component$, useState, useVisibleTask$ } from '@builder.io/qwik';
import { useRouteParams } from '@builder.io/qwik-city';

const BlogPostPage = component$(() => {
    const { slug } = useRouteParams();
    const [blogPost, setBlogPost] = useState(null);
    useVisibleTask$(() => {
        fetch(`/api/blog/${slug}`)
           .then(response => response.json())
           .then(data => setBlogPost(data));
    });
    return (
        <div>
            {blogPost && (
                <div>
                    <h1>{blogPost.title}</h1>
                    <p>{blogPost.content}</p>
                </div>
            )}
        </div>
    );
});

export default BlogPostPage;

在这个例子中，useVisibleTask$ 钩子确保数据获取操作在组件可见时执行，避免不必要的请求。

提交表单与路由导航

当用户提交表单时，我们通常需要将数据发送到后端，并在成功提交后导航到另一个页面。例如，在一个用户注册表单 src/routes/register.tsx 中：

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

const RegisterPage = component$(() => {
    const [formData, setFormData] = useState({
        username: '',
        password: ''
    });
    const navigate = useNavigate();
    const handleSubmit = (e) => {
        e.preventDefault();
        fetch('/api/register', {
            method: 'POST',
            headers: {
                'Content - Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
           .then(response => {
                if (response.ok) {
                    navigate('/login');
                } else {
                    // 处理错误
                }
            });
    };
    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                placeholder="Username"
                value={formData.username}
                onChange={(e) => setFormData({...formData, username: e.target.value })}
            />
            <input
                type="password"
                placeholder="Password"
                value={formData.password}
                onChange={(e) => setFormData({...formData, password: e.target.value })}
            />
            <button type="submit">Register</button>
        </form>
    );
});

export default RegisterPage;

在这个例子中，当用户提交表单时，数据会被发送到 /api/register 后端接口。如果注册成功，用户会被导航到 /login 页面。

性能优化

在构建单页面应用时，性能优化是至关重要的。Qwik 在路由与导航方面提供了一些特性来帮助提升性能。

代码拆分与懒加载

Qwik 支持代码拆分和懒加载路由组件。这意味着只有在需要时才会加载相应的路由组件代码，而不是在应用启动时加载所有代码。

例如，在 src/routes/admin/dashboard.tsx 中，我们可以将该组件标记为懒加载：

// 这里不需要导入组件，而是使用动态导入
const DashboardPage = () => import('./dashboard - component');

export default DashboardPage;

这样，当用户导航到 /admin/dashboard 页面时，dashboard - component 的代码才会被加载，从而减少应用的初始加载时间。

预加载

Qwik 还支持预加载功能。我们可以通过在 <Link> 组件上设置 preload 属性来预加载目标路由的代码。例如：

import { component$ } from '@builder.io/qwik';
import { Link } from '@builder.io/qwik-city';

const HomePage = component$(() => {
    return (
        <div>
            <h1>Welcome to My App</h1>
            <Link to="/admin/dashboard" preload>Go to Admin Dashboard</Link>
        </div>
    );
});

export default HomePage;

当用户在首页时，如果鼠标悬停在链接上，Qwik 会提前加载 /admin/dashboard 组件的代码，这样当用户真正点击链接时，页面可以更快地渲染。

缓存策略

Qwik 允许开发者定义路由组件的缓存策略。例如，我们可以在 src/routes/blog/[slug].tsx 中设置缓存策略：

import { component$, cache } from '@builder.io/qwik';
import { useRouteParams } from '@builder.io/qwik-city';

const BlogPostPage = component$(() => {
    const { slug } = useRouteParams();
    return (
        <div>
            <h1>Blog Post: {slug}</h1>
            <p>This is the content of the blog post with slug {slug}.</p>
        </div>
    );
});

cache(BlogPostPage, { strategy: 'lru', maxEntries: 5 });

export default BlogPostPage;

在这个例子中，我们使用 cache 函数为 BlogPostPage 定义了一个 LRU（最近最少使用）缓存策略，最多缓存 5 个实例。这样，当用户频繁访问不同的博客文章页面时，如果缓存中有对应的实例，就可以直接使用，而不需要重新渲染组件，从而提高性能。

通过上述对 Qwik 路由与导航的各个方面的深入探讨和代码示例，开发者可以更好地利用 Qwik 的特性来构建高效、用户体验良好的单页面应用。从基础的路由定义到复杂的路由守卫、状态管理以及性能优化，Qwik 提供了一套完整且强大的工具集，助力前端开发更加高效和优质。无论是小型项目还是大型企业级应用，Qwik 的路由与导航功能都能满足各种需求。