• ドキュメント
  • エコシステム
  • チュートリアル
  • ショップ
  • GitHub
  • @QwikDev
  • Discord

🧪 型付きルート

段階: プロトタイピング

アプリケーション内で型安全な方法でURLを構築します。

インストール

  1. npm install github:QwikDev/qwik-labs-build#main
  2. vite.config.ts を更新します
    // ...
import { qwikTypes } from '@builder.io/qwik-labs/vite';
 
export default defineConfig(() => {
  return {
    plugins: [
     // ...
     qwikTypes() // <== Add `qwikTypes()` to the list of plugins
    ],
    // ...
  };
});
  3. ビルドを実行して、~/routes.gen.d.ts と ~/routes.config.tsx ファイルを生成します。
  4. 型安全なリンクを作成するには
    import { AppLink } from '~/routes.config';
 
export default component$(() => {
  // ...
  return (
    // ...
    <AppLink route="/your/[appParam]/link/" param:appParam={"some-value"}>
      Link text
    </AppLink>
  );
});

宣言的なルーティング

これは、元々 Jack Herrington 氏（別名 *「The Blue Collar Coder」*）が NextJS アプリケーション内で型安全なルーティングを行うために作成したパッケージで、QwikCity 内で使用できるように adaptéd されています。

インストール

  1. npx declarative-routing init

セットアップ

初期化プロセスでは、いくつかの重要なファイルが作成されます。

.src/declarativeRoutes

  • makeRoute.ts - ページルートを定義するために使用されます
  • index.ts - すべてのルートファイルがインポートされる場所です。
  • hooks.ts - 型安全なルート URL、パラメータ、および検索パラメータにアクセスするために使用される2つのカスタムフック useParams と useSearchParams を含むファイルです

各ルートディレクトリ

  • routeInfo.ts - ルートに名前を付け、params と search (検索パラメータ) に zod スキーマを提供する場所です

使用方法

ルートの詳細を宣言する

/src/routes/pokemon/[pokemonId]/routeInfo.ts
import { z } from "zod";
 
export const Route = {
  name: "PokemonDetail",
  params: z.object({
    pokemonId: z.coerce.number(),
  }),
};

コンポーネント内

コンポーネント内で宣言型ルートを使用するには、いくつかの方法があります。

  1. RouteName.Link を使用する
myComponent.tsx
import { PokemonDetail } from "~/declarativeRoutes
 
export default component$(() => {
  // ...
  return (
    // ...
    <PokemonDetail.Link pokemonId={1}>Bulbasaur</PokemonDetail.Link>
  );
});
  1. 標準の Link を使用し、RouteName を関数として使用してパスを返します
myComponent.tsx
import { Link } from "@builder.io/qwik-city";
import { PokemonDetail } from "~/declarativeRoutes
 
export default component$(() => {
  // ...
  return (
    // ...
    <Link href={PokemonDetail({ pokemonId: 1 })}>Bulbasaur</Link>
  );
});
  1. RouteName.ParamsLink を使用する
myComponent.tsx
import { PokemonDetail } from "~/declarativeRoutes";
 
export default component$(() => {
  // ...
  return (
    // ...
    <PokemonDetail.ParamsLink params={{ pokemonId: 1 }}>Bulbasaur</PokemonDetail.ParamsLink>
  );
});
  1. RouteName からパラメータを取得します
myComponent.tsx
import { PokemonDetail } from "~/declarativeRoutes";
 
export default component$(() => {
  // Typescript will know the correct params and their types
  const { pokemonId } = useParams(PokemonDetail);
  // ...
  return (
    // ...
  );
});

ルートを追加または変更する

新しいルートを追加したり、既存のルートを移動したりする場合は、単に npx declarative-routing build を実行すると、プロセスが再実行され、必要な変更がすべて更新されます

貢献者

このドキュメントの改善に貢献してくれたすべての貢献者に感謝します！

  • mhevery
  • RumNCodeDev