Vishwas Gopinath

路由在Web开发世界中起着至关重要的作用，从而允许在应用程序中的各个页面或视图之间进行无缝导航。在此博客文章中，我们将使用视觉指南探索Qwik’s路由功能。

入门

QWIK主要关注组件API，而路由功能则由 Qwik City 支持。可以将Qwik City视为Next.js的等效。

要开始，请在终端中按照这些命令创建并运行一个新的Qwik City项目：

ð在创建应用程序时选择“空应用”作为启动模板。

npm create qwik@latest
cd qwik-app
npm start

在您首选的代码编辑器中打开项目。

路由约定

Qwik City采用了基于目录的路由机制，其中浏览器中的URL路径由代码库中的文件和文件夹确定。遵循约定对于适当的路由功能至关重要。让我们讨论并理解不同的惯例。

ð在此博客文章中，我们将仅专注于Qwik City路线中的页面（UI），而不会深入研究端点（API请求）。端点将在单独的博客文章中进行全面解决。

根路由

Qwik City路由的核心是src文件夹中的routes文件夹。要为根URL创建路由（localhost:5173），请按照以下步骤：

• 在routes文件夹中，创建一个index.tsx文件。该文件对Qwik City很特别，代表路线。
• 在index.tsx文件中定义一个简单的QWIK组件，以表示主页：

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

export default component$(() => {
  return <h1>Welcome home!</h1>
})

对我们来说幸运的是，起动器带有根路线。打开您的浏览器并导航到localhost:5173以显示“欢迎回家”消息。

视觉表现

添加更多路线

现在，让我们创建另外两个路由：一个用于“关于页面”，另一个用于个人资料页面。

• 创建一个src/routes/about文件夹。
• 在about文件夹中，创建一个index.tsx文件。此文件代表路由。
• 在index.tsx文件中定义最小qwik组件以表示大约页面：

// routes/about/index.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <h1>About me</h1>
})

• 类似地，创建一个src/routes/profile文件夹。
• 在profile文件夹中，创建一个index.tsx文件。此文件代表路由。
• 在index.tsx文件中定义一个简单的QWIK组件以表示“配置文件”页面：

// routes/profile/index.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <h1>My profile</h1>
})

当您访问root URL时，localhost:5173时，仍将显示主页。但是，如果您导航到localhost:5173/about，则会看到关于我的页面。同样，将URL更改为/profile将渲染我的个人资料页面。

这表明路由与基于包含的文件夹名称中的文件相关联。 about文件夹中的index.tsx文件对应于/about，而profile文件夹中的index.tsx文件对应于/profile。

视觉表现

处理非匹配路线

如果您输入无法映射到routes文件夹中的文件的URL，会发生什么？例如，/dashboard。 Qwik City将自动响应404 Not Found响应，并在DEV模式下显示在应用程序中显示可能的路由的视图。您不必明确处理非匹配路线，因为Qwik City为您处理了这一点。

ð您还可以定义custom 404 page或dynamic 404 page。

嵌套路线

除了基本路线外，Qwik City还为嵌套路线提供支持，因此您可以在应用程序中建立层次结构。当用户导航到url localhost:5173/blog时，让我们的目标是渲染页面。此外，我们需要为localhost:5173/blog/first和localhost:5173/blog/second渲染页面。

要实现嵌套路线，请执行以下步骤：

• 创建一个src/routes/blog文件夹。
• 在blog文件夹中，为主博客页面创建一个index.tsx文件：

// routes/blog/index.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <h1>My blog</h1>
})

• 导航到localhost:5173/blog查看我的博客 page。
• 要实现/blog/first和/blog/second路线，请在src/routes/blog/first和src/routes/blog/second文件夹中创建index.tsx文件：

// routes/blog/first/index.tsx

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

export default component$(() => {
  return <h1>First blog post</h1>
})

// routes/blog/second/index.tsx

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

export default component$(() => {
  return <h1>Second blog post</h1>
})

现在，导航到localhost:5173/blog/first显示了第一篇博客文章，localhost:5173/blog/second显示了第二篇博客文章。

通过创建嵌套文件夹结构，Qwik City自动将文件相应地路由。这简化了创建嵌套路由并增强应用程序的组织和结构的过程。

视觉表现

动态路线

像/blog/first和/blog/second这样的预定义路径可能并不总是适合具有数百条路线的复杂应用。 Qwik City支持处理此类情况的动态路线。让我们创建动态路由以处理产品列表和详细页面。

要创建动态路线，请按照以下步骤：

• 创建一个src/routes/products文件夹。
• 在products文件夹中，创建一个index.tsx文件以显示三个产品的列表：

// routes/products/index.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return (
    <>
      <h1>Product List</h1>
      <h2>Product 1</h2>
      <h2>Product 2</h2>
      <h2>Product 3</h2>
    </>
  );
});

• 通过在浏览器中导航到localhost:5173/products，显示的产品列表。
• 对于详细信息页面，在products文件夹中，创建一个名为[productId]的新文件夹。方括号表示动态路线段。
• 在[productId]文件夹中，创建一个index.tsx文件：

// routes/products/[productId]/index.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <h1>Details about the product</h1>
});

现在，当您导航到localhost:5173/products/1时，您将获得产品详细信息页面。同样，访问/products/2，/products/3甚至/products/100将显示相同的详细信息页面。 [productId]是可以容纳1、2、3等值的动态路线段。

要显示特定的产品ID，您可以使用Qwik City的useLocation()功能。修改组件如下：

// routes/products/[productId]/index.tsx
import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
  const loc = useLocation();
  return <h1>Details about product {loc.params.productId}</h1>
});

现在，当您导航到localhost:5173/products/1时，有关产品1显示的详细信息。同样，访问/products/100显示有关产品100的详细信息。

在任何UI应用程序中实现列表详细模式时，动态路线都是有益的。通过了解如何在Qwik City创建动态路线，您可以构建适合不同用户交互的灵活和可扩展应用程序。

视觉表现

嵌套的动态路线

在上一节中，我们了解了动态路线。现在，让我们进一步探索嵌套的动态路线。

复杂的应用程序通常需要多个动态路线段。例如，当导航到/products/1时，用户期望获得产品1的详细信息1.同样，访问/products/1/reviews/1应该显示该产品的第一个评论。让我们探讨如何实现这一目标。

要创建嵌套动态路线，请按照以下步骤：

• 创建一个src/routes/products/[productId]/reviews文件夹。这种结构将我们带到了“/products/productid/评论”的路线。但是，我们还需要一个动态的reviewId。
• 在reviews文件夹中，创建一个名为[reviewId]的新文件夹。再次，方括号表示动态路线段。
• 在[reviewId]文件夹中，创建一个index.tsx文件，我们将在其中定义一个QWIK组件以同时显示productId和reviewId。

// routes/products/[productId]/reviews/[reviewId]/index.tsx
import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
  const loc = useLocation();
  const { productId, reviewId } = loc.params
  return <h1>Review {reviewId} for product {productId}</h1>
});

现在，如果我们在浏览器中导航到localhost:5173/products/1/reviews/1，则会显示预期的文本。同样，导航到productId 100和reviewId 5将反映UI中的相应ID。

本节的关键要点是，可以通过在文件夹名称中具有动态段来创建嵌套的动态路由。

视觉表现

捕捉所有路线

Qwik City提供了允许灵活路由的全部路线功能。假设我们想创建一个具有多个功能和概念的文档网站，每个概念都有自己独特的路线。我们可以使用All All路线，而不是为每个路线创建单独的文件。

要实现一条全部路线，请按照以下步骤：

• 创建一个src/routes/docs文件夹。
• 在docs文件夹中，创建一个由Qwik City认可的特殊名称的文件夹。使用方括号和三个点（例如，[...slug]）包含您选择的名称。
• 在slug文件夹中，创建一个带有代表文档主页的基本QWIK组件的index.tsx文件。

// routes/docs/[...slug]/index.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <h1>Docs home page</h1>
});

通过使用此结构，index.tsx文件将匹配路径中包含/docs段的任何URL。这样，我们可以定义一个处理URL中所有路由段的单个文件。

要访问URL中的不同段，请依靠Qwik City提供的useLocation()功能。例如：localhost:5173/docs/routing/catch-all-segments可以渲染以下组件：

// routes/docs/[...slug]/index.tsx
import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
  const loc = useLocation()
  const slugArr = loc.params.slug.split('/')
  if (params.slug.length === 2) {
    return (
      <h1>
         Docs for feature {params.slug[0]} and concept {params.slug[1]}
      </h1>
    );
  } else if (params.slug.length === 1) {
    return <h1>Viewing docs for feature {params.slug[0]}</h1>;
  }
});

有了全部的段，您可以为路线创建层次结构，允许更好的组织和SEO，同时重用一个为URL不同变化的单个文件。这种方法对于文档网站特别有用。

视觉表现

布局

我们了解到，页面代表了特定路线的唯一UI。但是，在许多情况下，我们希望在应用程序中的多个页面上具有一致的布局，例如顶部的标头和底部的页脚。通过布局，实现这一目标变得更加容易，更灵活。

Qwik City的布局

那么，布局到底是什么？ Qwik City的布局是一个UI组件，在应用程序中的多个页面之间共享。它使我们能够为一组页面定义一个共同的结构和外观，减少冗余并促进代码可重复使用。

创建布局

要创建一个布局，我们需要定义一个QWIK组件，该组件将其导出为名为layout.tsx的文件的默认值。该组件应渲染一个Slot组件，该组件将在渲染过程中用子页面的内容填充。

以这种方式，子页面成为布局的一部分，我们可以围绕它设计一个一致的UI。

视觉表现

使用一个空的Qwik应用程序，一个特殊的布局文件，layout.tsx自动在routes文件夹中生成。

// routes/layout.tsx
import { component$, Slot } from '@builder.io/qwik';

export default component$(() => {
  return <Slot />;
});

布局组件包含一个Slot，它表示布局中呈现的子页面组件。对于http://localhost:5173/about，Slot被routes/about/index.tsx文件中定义的组件替换。

在这里，带有标头和页脚组件的相同布局：

// routes/layout.tsx
import { component$, Slot } from '@builder.io/qwik';

import Header from '~/component/header/header';
import Footer from '~/components/footer/footer';

export default component$(() => {
  return (
    <>
      <Header />
      <main>
        <Slot />
      </main>
      <Footer />
    </>
  );
});

可以根据我们的需求自定义标题和页脚，提供所需的布局结构和样式。重要的是要注意，由于布局应用于每个页面，因此无论当前路线如何，都可以看到标头和页脚。这意味着，如果我们导航到/about或/products等不同页面，则标题和页脚部分保持一致。

视觉表现

嵌套布局

除根布局外，Qwik City还支持嵌套布局的概念。此功能允许我们定义针对应用程序某些领域的布局。

考虑一个产品详细信息页面，该页面通过路由参数动态读取产品ID。这是动态路线的文件夹结构：

routes文件夹包含一个布局文件和一个products文件夹。 products文件夹又包含Dynamic [productId]文件夹。

[productId]文件夹中的index.tsx文件包含ProductDetails组件。该组件在JSX中显示产品ID。

// routes/products/[productId]/index.tsx
import { component$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';

export default component$(() => {
  const loc = useLocation();
  return <h1>Details about product {loc.params.productId}</h1>
});

如果我们想为产品详细信息页面创建一个布局，则可以在[productId]文件夹中创建一个单独的layout.tsx文件。嵌套布局文件可以具有自己的结构和内容，专门针对增强产品详细信息页面的显示。这里是产品详细信息布局文件的代码：

// routes/products/[productId]/layout.tsx
import { component$, Slot } from '@builder.io/qwik';

export default component$(() => {
  return (
    <>
      <Slot />
      <h2>Featured products</h2>
      {/* Carousel of featured products */}
    </>
  );
});

我们将嵌套布局定义为QWIK组件，类似于根布局，并且还应接受Slot组件。在这种情况下，Slot组件表示产品详细信息页面的内容。作为布局的一部分，我们渲染了一系列特色产品。

通过嵌套布局，我们可以创建仅适用于应用程序特定区域的共享UI组件的层次结构。例如，根布局可以包含主结构，例如标题和页脚，而productId文件夹中的嵌套布局可以专注于显示与该特定产品相关的特色产品。

视觉表现

分组的布局

分组的布局允许逻辑分组共享布局的路线，而不会影响URL结构。可以通过包装括号中的文件夹来创建它们：(folderName)。

例如，可以分别在/register，/login和/reset访问routes/(auth)/register/index.tsx，routes/(auth)/login/index.tsx和routes/(auth)/reset/index.tsx。这三个路线将使用routes/(auth)/layout.tsx中定义的布局。

视觉表现

命名布局

在某些情况下，兄弟姐妹可能需要不同的布局，而彼此之间有很大差异。 Qwik City提供了为同胞路由定义多个布局的能力，包括默认布局和其他命名布局。这允许子路由根据其要求请求特定的命名布局。

要创建一个命名的布局，文件名应以“布局”开头，然后是破折号“ - ”和一个唯一的名称。例如，可以命名为layout-two.tsx。然后，路由可以通过在文件名中添加后缀@二来请求指定的布局：routes/(auth)/reset/index@two.tsx。

视觉表现

结论

在这篇博客文章中，我们探索了Qwik City路由的基础知识。我们讨论了路由惯例，为不同方案创建了路由，并突出了Qwik City关于路由的配置方法的约定。

布局使我们能够在多个页面上定义一致的UI结构，减少代码重复并易于管理共享组件。嵌套的布局进一步采取了这个概念，使我们能够为应用程序的不同部分创建专门的布局。另一方面，分组的布局使我们可以共享UI而不会影响URL。命名的布局允许我们为特定路线选择一个布局。

使用Qwik City，您可以通过利用代码库的文件和文件夹结构来轻松定义和管理路线，从而消除了对其他路由配置的需求。

通过您的组件在视觉上构建

Builder.io是一个无头的CMS，可让您在现有网站内带有your components的drag and drop。

Try it out Learn more

// Dynamically render your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />
}

registerComponents([MyHero, MyProducts])

在Builder.io blog上阅读full post