React Router

3ステップで試す

1. 1

   React Router 8.4.0を固定して導入する

   Node.js 22.22以上を用意し、一時npm projectへReact Routerとpeer dependencyを固定して導入します。

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

   URL parameterをmatchする最小routeを書く

   browserを起動せず、pure route matching APIでdynamic segmentを確認する最小例を作ります。

   printf '%s\n' "import { matchRoutes } from 'react-router'" "const matches=matchRoutes([{path:'/users/:id'}],'/users/42')" "console.log(matches?.[0]?.params.id)" > demo.mjsコピー
3. 3

   match結果を検証する

   /users/42からroute parameter id=42が取得できることを確認します。

   test "$(node demo.mjs)" = '42'コピー

Built with

• TypeScript

カテゴリとタグ

GitHubデータ

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

あわせて探訪

• Next.js143,179 Stars

  共通タグ 3件 · 共通カテゴリ 1件

  Reactのrouting・rendering・server機能をまとめてフルスタックWebアプリを構築する

  JavaScript
• Ant Design99,682 Stars

  共通タグ 3件 · 同じ言語

  enterprise向けReact UIを完成済みcomponents・design token・theme機構で統一し、管理画面や業務画面を素早く構築する

  TypeScript
• Storybook91,200 Stars

  共通タグ 3件 · 同じ言語

  UI状態をstoryとして保存し、Docs・interaction test・AI toolへ再利用するfrontend workshop

  TypeScript
• Zustand58,786 Stars

  共通タグ 3件 · 同じ言語

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

  TypeScript
• Motion33,834 Stars

  共通タグ 3件 · 同じ言語

  React・JavaScript・Vueでgestureやspring、layout transitionを含むWeb animationを構築する

  TypeScript
• Expo52,566 Stars

  共通タグ 4件 · 同じ言語

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

  TypeScript