実現したいこと

/users/1/rooms/1のように2つの動的なルーティングの作る時にroomはどこに置くのか、2つの動的ルーティングを実現する為のコードが知りたいです。(または、参考サイト)

現在のコード

pages
|- users
  |- [uid].tsx

jsx
1const router = useRouter();
2const { uid } = router.query;
3
4//roomはこう当てはめるかなという感じで書いています。
5{rooms.map((room) => {
6  return (
7    <Link href={`/users/${uid}/rooms/${room.id}`} key={room.id}>
8      <a>{room.title}</a>
9    </Link>
10  );
11})}

リンクは/users/1/rooms/1などに飛んでくれますが、not foundでページがない状態なのでどこかにroomディレクトリとそのファイルを置かなければいけませんが、置く場所が分からず、困っております。

知見のある方のお力をいただきたいです。よろしくお願いします。

追記

最新のディレクトリ構成

users
    └── [userId]
        ├── index.tsx
        └── rooms
            └── [roomId].tsx

gouf

2021/01/21 12:24

他のひとの回答、ヒントを待ちたいですが; たとえばわたしのこのコミット (空ファイルの設置と設置 path に注目) のようにした場合、参考にした場合、何か変化は見られますか? : https://github.com/gouf/nuxt_js_hello_demo/commit/7e45e7e1d814e4a3a4095caf19190d4ad27b42b4

nabe_R

2021/01/21 12:48 編集

ご返信ありがとうございます！ディレクトリ構成はこんな感じのイメージでしょうか？ ([uid].tsxとroomsが同じ階層です) もしこのイメージ通りであれば、試してみましたが、変化はありませんでした。 ``` - pages |-users |- [uid].tsx |- rooms |- [rid].tsx ```

gouf

2021/01/21 12:55

underscore 付きのファイルを設置することでその部分に関しては動的割り当てが可能になるみたいです : https://ja.nuxtjs.org/docs/2.x/features/file-system-routing/#%E5%8B%95%E7%9A%84%E3%81%AA%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0

nabe_R

2021/01/21 13:07

大変恐縮ですが、こちら、NextとNuxtの見間違いではないでしょうか？

gouf

2021/01/21 15:41

見間違い、してますね。申し訳ないです

nabe_R

2021/01/22 06:55

解決にお力を貸していただきありがとうございました！無事に解決策が分かりましたのでお伝えさせていただきました！力を貸せる側になれるよう頑張ります。

行動規範の内容に同意します

回答1件

ベストアンサー

こちらの例にあるようにpages/post/[id]/[comment].jsというディレクトリ構成にすることができます
今回の場合はpages/users/[userId]/rooms/[roomId].jsだと思います
https://github.com/vercel/next.js/tree/canary/examples/dynamic-routing

投稿2021/01/22 01:43

mikan3rd

総合スコア220

nabe_R

2021/01/22 06:38

ご回答ありがとうございます！公式を見て自分のディレクトリ名と構成に落とし込もうとすると分からなくなっていたので、【今回の場合はpages/users/[userId]/rooms/[roomId].jsだと思います】こちらのおかげで理解することができました！ありがとうございます。ディレクトリ名がこれでいいのか少し不安なので、もしよろしければ追記に書きますので見ていただけませんか？ BA回答に今の時点でしたいのですが、やりとりができなくなるのか分からないので保留させていただきます。(BA後もやりとりできそうと判明したらBAにいたします。)