NextJS 13 の動的ルーティングが期待どおりに機能しません。どうすればうまくいくでしょうか?
P粉066224086
P粉066224086 2023-12-24 13:46:46
0
1
499

ID 部分が動的である必要がある NextJS 13 プロジェクトで、URI が blogs/id/ になるように動的ルーティングを使用しようとしていますが、機能していないようです。常にブログに対応したページが表示されるようです。

このプロジェクトでは Next 13 の実験用アプリケーション ディレクトリを使用しています。layout.jsx を作成して設定した blogs のルートがあります。これは、src/app/blogs/ ディレクトリ内の >page.jsx です。

src/app/blogs/[id]/page.jsx のコンソール ログ ステートメントがサーバー側のコンソールに表示されることに気付きました。つまり、端末(ブラウザコンソールではありません)です。ただし、return ステートメント内の対応する JSX はレンダリングされません。代わりに、blogs に対応する JSX がレンダリングされます。

プロジェクト内のJSXコード:

src/app/blogs/layout.jsx リーリー

src/app/blogs/page.jsx リーリー

src/app/blogs/[id]/layout.jsx リーリー

src/app/blogs/[id]/page.jsx リーリー

プロジェクトと環境の詳細:

-次の v13.3.0

- Tailwindcss v3.3.1

- ノード v18.15.0

- 糸 v1.22.19

- Ubuntu 22 (Linux)

参考用スクリーンショット:

ブログ/参考用の 2 番目のスクリーンショット

参考用のフロントエンドのスクリーンショット

公式ドキュメントを何度か読みましたが、何が問題なのか、なぜ正しくレンダリングされないのか理解できません。ご協力をよろしくお願いいたします。

P粉066224086
P粉066224086

全員に返信(1)
P粉198814372

ねえ、ここで私が見た問題は、 動的ルーティング ではなく、layout.jsx であるということです。

ページを手動でレンダリングするのではなく、子をレンダリングする必要があります。

src/app/blogs/layout.jsx

リーリー

src/app/blogs/[id]/layout.jsx

リーリー ######詳しくは######

ページ コンテンツ

は、最も近い
    layout.jsx
  • に自動的に渡されます。たとえば、http://localhost:3000/blogs ## にアクセスしようとすると、 # application /blog 内のレイアウトがレンダリングされます http://localhost:3000/blogs/1 にアクセスしようとすると、app/blogs/[id]
  • 内のレイアウトが表示されます
  • ユースケースはわかりませんが、レイアウトが app/blogs/[id]## に存在しないときに http://localhost:3000/blogs にアクセスするときの情報を提供するためです。 #/1 この場合、
  • app/blogs
  • にある最も近いレイアウトがレンダリングされます。つまり、複数のレイアウトは必要ありません ###参考のために### ページとレイアウト - https://nextjs .org/docs/app/building-your-application/routing/pages-and-layouts
ルーティング グループ -

https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート