Meteor、React、Material-UI を使用してアプリを作成しています。簡単にするために、アプリにホームとユーザーの 2 つのページがあるとします。
両方のページのレイアウトは同じである必要があります。左側にハンバーガー メニューのある AppBar、右側に IconMenu があります。ハンバーガー メニューを選択するとドロワーが左からスライドし、右のメニューを選択するとドロップダウン メニューが表示されます。
私の目的では、ドロワー メニューは静的です。つまり、どのページ (ホームまたはユーザー) が表示されているかに応じて、メニュー エントリは変化しません。ただし、右側のドロップダウン メニューは、アクティブなページに応じて変化します。つまり、コンテキスト依存です。
私の質問は、これを構築するという点でどのようなオプションがありますか?
1 つのオプションは、HomePage と UserPage などの 2 つのページ コンポーネントを作成し、MyAppBar と MyDrawer などを使用してそれぞれを構成し、さらに特定のページに含める必要があるコンテンツをすべて作成することだと思います。次に、各ページがドロップダウン メニューのメニュー項目を作成し、それらを MyAppBar に渡し、ページ全体がレンダリングされます。
これで問題は解決すると思いますが、もっと良い方法があるかどうかはわかりません。たとえば、ページのコンテンツ コンポーネントだけを更新し、所有するコンポーネント (ApplicationPage コンポーネントなど) がコンテンツ コンポーネント (HomeContent または UserContent など) に対してドロップダウン メニューのエントリをクエリし、コンテンツ コンポーネントが変更されたときにドロップダウン メニューを設定しますか? 他のオプションはありますか？
/home と /user のルーティングを行うために React Router を使用しているため、上記もそれに適合する必要があります。