体験 @tanstack/router は簡単ではないことを発見しました - Next.js を ' 祛魅 ' しました。
以前、Next.js は非常に成熟していると思っていましたが、@tanstack/router のドキュメントを読んで、世界はまだ広がっていると感じました。
ドキュメントには stackblitz の例があり、非常に包括的です。しかし、実際にプロジェクトのコードとページを実践して、最適な実践例を見つけようとしたとき、提供された例がどれだけ素晴らしいかを知りました。
以前に例が良いと感じたのは、n 年前に webpack の公式リポジトリに例があったとき、next.js に例があったとき、plasmo に例があったとき、非常に多くの with-xxx の例があったからです。
今回例が良いと感じたのは、常に realworld のプロジェクトや具体的な実践を探していたからです。それは一般的なシナリオがすべてカバーされているという要件を満たしており、すべてのシナリオを網羅する例があるはずだと思いました。
コーディングの困難に直面する#
私は実践を始め、2 つの技術を組み合わせる際に非常に柔軟であり、最適な方法を選ぶことができないように感じました。最も基本的な方法を選んで組み合わせました（1 つのファイルに関連する接着剤コードをすべて貼り付ける）。次に、頻繁に使用するコードを共通のファイルに抽出し、シングルトンの再利用を保持するなど、無限の最適化を行いたいと思いました。パラメータの位置が増えると、適切に分割する必要があります。これは私が事前に考えていなかったものであり、または、それに触れた後、その作業に陥る可能性があります。最適な実践を見つけることを最も期待しています。
今、私はまだ読み終えていないが、最適な実践を感じています。
一緒に Ktichen Sink の例を見てみましょう#
機能の体験#
-
パラメータの制御パネルのデモ、私の心をつかみました。すべてがスキャフォールディングとページの切り替えの重要なパラメータに直接影響を与えます。
-
シナリオリスト：
- ベーシック：ログイン / 非ログイン、レイアウト、遅延読み込み、ネストされたルーター
- ベースを非表示：URL パラメータに対応するストアのロジック；パラメータのシリアライズ；パラメータ -> 依存関係 -> ローダーの処理
- インタラクション：ルーターのローダーの保留状態の処理；作成された状態の処理
- ディープインタラクション：リンクのプリロード
コードの詳細 - 技術ポイントの組み合わせ方法#
一度読んで、公式ドキュメントの内容を自分の言葉で要約するようなものです。省略せず、直接コピーせず、収穫があるようにします。
- auth
ロード順序 - beforeLoad でリダイレクトロジックを追加します。
コンテキストを追加し、依存関数のインジェクションを避けるために使用します。したがって、コンテキストも制限され、巨大なチャンクを追加しないように注意する必要があります。
API の設計上、イベントサイクルの段階を分割し、カバーするシナリオに基づいて分割します。理論的には自由に拡張できますが、非常に制限されて成功したものだけが人気のあるフレームワークになることができます。
未解決の問題：ログインボタンのローディングの処理はどうすればよいですか？同様に、ログアウトの処理もありますか？ログインに成功した後、invalidate を呼び出し、ローダーでログイン済みかどうかをチェックし、ログイン後のデフォルトページにリダイレクトするロジック
- layout
- ファイル名またはフォルダの前に_layout を付けるか、_layout.route.tsx
- ここでは、通常の ``==`./index`を細分化し、[`` == `/route` | `../[foldername]` , `/` == `/index` ] に変えました。
- data-loader with @tanstack/query
私の単純な考え - コンポーネントコードに useQuery を追加し、通常の使用と同じです。
考えを打ち破る - 組み込みのローダーとは一致せず、クエリの状態を現在のルーターに渡すこともできません。また、コンテキストは統一されたインジェクションポイントであり、各ルーターに独立したスペースを与えません。
kitchen-sink の方法：queryClient をコンテキストに配置し、ローダーで queryClient の ensureQueryData を使用し、コンポーネントで同じオプションを使用して同じデータを取得します。 - data-loader の状態処理
<MatchRoute />コンポーネントが提供されており、少し直感に合わないです。そのパラメータはフィルターパラメータであり、私は settle パラメータだと思っていました。私の習慣は通常、useXXX を使用して判断することです。しかし、ここでは、関数型の children を使用して変更に応答します。 - @tanstack/query 内の dataMutation
@tanstack/query の useMutation と同じで、組み合わせて使用する新しい方法はありません。
最初の読み終えました。一部の祛魅を感じました。今、一部を実践し、わからないことがあるかどうかを見てみます。あれば、さらに記録を続けます。