Router

3ステップで試す

1. 1

   固定版を準備する

   Node.js 20.19以上とnpmが必要です。一時ディレクトリにReact用Router 1.170.41を固定して導入します。

   demo=$(mktemp -d "${TMPDIR:-/tmp}/tanstack-router.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @tanstack/react-router@1.170.41 react@19.2.0 react-dom@19.2.0コピー
2. 2

   型付き経路と検索条件を書く

   /productsのpage検索値を数値へ変換する経路ツリーを作り、メモリー履歴をpage=2で開始します。

   printf '%s\n' 'import { createRootRoute, createRoute, createRouter } from '\''@tanstack/react-router'\''' 'import { createMemoryHistory } from '\''@tanstack/history'\''' 'const root=createRootRoute()' 'const products=createRoute({getParentRoute:()=>root,path:'\''/products'\'',validateSearch:s=>({page:Number(s.page??1)})})' 'const router=createRouter({routeTree:root.addChildren([products]),history:createMemoryHistory({initialEntries:['\''/products?page=2'\'']})})' 'await router.load()' 'console.log(`${router.state.location.pathname} page=${router.state.location.search.page}`)' 'const next=router.buildLocation({to:'\''/products'\'',search:{page:3}})' 'console.log(`${next.pathname} page=${next.search.page}`)' > demo.mjsコピー
3. 3

   現在地と次の場所を検証する

   現在地のpage=2と、型付きの画面遷移用に組み立てたpage=3が順に出ることを確認します。

   test "$(node demo.mjs)" = $'/products page=2\n/products page=3'コピー

Built with

• TypeScript
• React
• JavaScript

カテゴリとタグ

GitHubデータ

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

あわせて探訪

• Redux61,484 Stars

  共通タグ 3件 · 同じ言語

  共有状態の更新経路をStore・Action・Reducerで明示し、現代的な実装はToolkitへ寄せる

  TypeScript
• Zustand58,786 Stars

  共通タグ 3件 · 同じ言語

  Reactの状態をproviderなしのhook storeで管理し、selectorで必要な部分だけ購読する

  TypeScript
• Expo52,566 Stars

  共通タグ 3件 · 同じ言語

  React NativeアプリをAndroid・iOS・Webへ一つのprojectから展開する

  TypeScript
• TanStack Query50,394 Stars

  共通タグ 3件 · 同じ言語

  remote/server stateのfetch・cache・refetch・mutationをUI frameworkから分離して管理するasync state library

  TypeScript
• Virtual7,128 Stars

  共通タグ 3件 · 同じ言語

  長い一覧のうち画面付近の要素だけを計算し、描画量を抑えるヘッドレス仮想化ライブラリ

  TypeScript
• Markuplint623 Stars

  共通タグ 3件 · 同じ言語

  HTML標準やARIAに沿ってmarkupを検査し、React・Vue・Svelte等のtemplateにも対応する

  TypeScript