問題タブ [nextjs-dynamic-routing]

Next.js を使用して LMS を構築しています。これまでのところ、私のプロジェクト構造はlocalhost/courses/1. 各コースは 7 ページです。ダッシュボード、課題、TestAndQuizzes、Gradebook、リソース、お知らせ、名簿。すべてのコンポーネントとページの準備が整いました。したがって、手動でlocalhost/courses/1/assignmentsまたはに移動するとlocalhost/courses/1323/roster、正常に動作します。

私がやりたいこと: 課題のリンクをクリックすると、その特定のコースの課題ページに移動する必要がありますlocalhost/courses/1/assignments。現在、URL を にハードコーディングしている/courses/1/[page]ので、割り当てをクリックすると に移動しlocalhost/courses/1/assignment、名簿をクリックすると に移動しlocalhost/courses/1/rosterます。

ユーザーがコース内のタブのいずれかをクリックすると、その特定のコースのそのページに移動するように、そのルートを動的にするにはどうすればよいですか?

調べましたがnext/link、next/routerまだできません。何か助けはありますか？

編集：これが私のフォルダ構造です：

上で述べたように、今のところ、リンクを使用して/courses/1/assignment、たとえば誰かに送信しました。

サイトをチェックアウトしたい場合は、My appでホストされています。

私は NextJS と MaterialUI を使用しており、テキストとボタンを含むカードを表示するコードをいくつか持っています。

カード コンポーネントの例

そして、カードの特定の部分は、ユーザーをたとえばページ A に移動させます。基本的に、カードの任意の場所 (タイトル、テキスト、空白領域) をクリックすると、ユーザーはそのページにリダイレクトされます。

しかし問題は、個々のボタンにリンク タグを使用するだけでは十分ではなく、空白スペースが使用されないことです。

私が試したのは、Card コンポーネント全体 (MaterialUi で作成) をネストすることです。任意の場所 (空白の領域も) をクリックするとユーザーはページ A にリダイレクトされますが、いいね、コメント、共有、およびポップアップ メニューを表示するはずの 3 ドット ボタンなどのボタンをクリックすると、そのページにもリダイレクトされるため、望ましくありません。

では、 and/or タグ内にネストされたときに特定のコンポーネントがリンクとして機能するのを防ぐ明確な方法はありますか? ボタンの上にカーソルを置いても、ブラウザの左下にリンクが表示されません。以外の代替手段onClick: {(e) => e.stopPropogation()}が優先されます。