web-navigation
Webナビゲーションパターンを実装する
Reactアプリケーションを構築するには、適切なルーティングとナビゲーションパターンが必要です。このスキルでは、React Router v6とNext.js App Routerのネストされたルート、動的セグメント、プログラムによるナビゲーションを含む、すぐに使えるコードサンプルを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「web-navigation」を使用しています。 Set up React Router with nested routes for a dashboard
期待される結果:
- • BrowserRouterがアプリ全体をラップ
- • DashboardLayoutが共有Sidebarと子のOutletを含む
- • ネストされたルートはpath='settings'を使用（親からの相対パス）
- • NavLinkがclassNameコールバックで自動アクティブスタイリングを提供
「web-navigation」を使用しています。 Create dynamic route for user profiles in Next.js
期待される結果:
- • ファイル構造: app/users/[id]/page.tsx
- • ユーザー識別子にparams.idでアクセス
- • クエリフィルタリング用のオプションのsearchParams
- • ビルド時の静的生成にgenerateStaticParamsを使用
「web-navigation」を使用しています。 Implement navigation guard for unsaved changes
期待される結果:
- • useBlockerフックがナビゲーション試行を監視
- • isDirtyのときにcurrentLocationとnextLocationを比較
- • blocker.proceed()でナビゲーションを許可、blocker.reset()でキャンセル
- • Dialogコンポーネントがユーザー確認を処理
セキュリティ監査
安全This is a pure documentation skill containing only markdown content with React Router and Next.js code examples. The static scanner flagged 62 false positives triggered by TypeScript template literals (backticks in code blocks), routing terminology, and URL patterns being misinterpreted as security threats. No executable code, network calls, file system access, or external command execution exists in this skill.
リスク要因
🌐 ネットワークアクセス (1)
⚙️ 外部コマンド (43)
品質スコア
作れるもの
Reactナビゲーションを構築する
React RouterまたはNext.jsを使用してReactアプリケーションにナビゲーションアーキテクチャを実装する
ディープリンクサポートを追加する
Reactアプリケーション用の動的パラメータとクエリ文字列を持つ共有可能なURLを作成する
ルート階層を構造化する
Reactアプリケーション用のネストされたレイアウトと共有ナビゲーションコンポーネントを設計する
これらのプロンプトを試す
React Router v6でホームページ、Aboutページ、404フォールバックを含む基本的なルーティングをセットアップする方法を教えてください
Next.js App Routerで/users/:idのようなURLパラメータをキャプチャする動的ルートを作成する方法を教えてください
React Routerで、サイドバーと子ルートを含むダッシュボードレイアウトを持つネストされたルート構造を作成してください
React Routerで認証が必要なルートを保護するためのナビゲーションガードを実装してください
ベストプラクティス
- 共有可能なディープリンクには、コンポーネント状態ではなくURLパラメータを使用する
- 非同期ルートデータのローディングとエラーバウンダリを実装する
- 未保存のフォームデータ損失を防ぐためにナビゲーションガードを使用する
回避
- navigationにrouter.navigateではなくwindow.locationを使用する
- ページ更新で保持されるべき重要なアプリケーション状態を保存する
- シングルページアプリケーションのスクロールリストアを忘れる