React-router-dom v6 を使用して、異なるレイアウト/要素を持つコンポーネントをレンダリングする: これを実現するにはどうすればよいですか?

Question

ナビゲーション バーとサイドバーのないログイン ページをレンダリングするコードを書くのに苦労しています。同様の質問をしているページをいくつか見つけましたが、私の現在の状況に当てはまるものはないようです。

React Router ログイン ページでナビゲーション バーを非表示にする方法 与えられた例は素晴らしいですが、同じタスクを達成する方法が、react-router-dom v6 で変更されたと思います。これにより、https://dev.to/iamandrewluca/private-route-in-react にアクセスできます。 router-v6-lg5

のこの変更

React Router のルーティングについていくつかの点が理解できていないようです。以下のコードには 2 つのルートがあります。ナビゲーション バーとサイドバー コンポーネントを使用せずにルートの 1 つ (ログイン) をレンダリングしたいと考えています。

リーリー

私が試したもう 1 つのオプションは、ナビゲーションバーとサイドバーのラベルをダッシュ​​ボード コンポーネントに移動することですが、その場合、基本的に新しいコンポーネントに対して同じコピー アンド ペーストを行う必要があります。このアプローチは間違っていて非効率的だと感じますが、それが正しいアプローチである場合は、必要なことを行います

編集: 現在実行していることは、ナビゲーション バーとサイドバーを含むログイン ページをロードすることであることを含めることが重要だと思います。 Navigation to Dashboard コンポーネントにはナビゲーション バーとサイドバーがありますが、これは意図的なものです。 ログイン ページにはナビゲーション バーとサイドバーを持たないようにしたいです

Answer 1

ナビゲーション バーを非表示にする最も簡単な方法は、ログイン ページ コンポーネントに移動して useLocation() を呼び出すことです。次に、使用場所を宣言した後、次のようにします。それを変数の位置に割り当てます { location.pathname === "/login" ?空: (

ナビゲーション バー コンポーネント全体をレンダリングします);

私が携帯電話で入力している間に読むことができれば別ですが

Answer 2

質問の意味が理解できれば、ナビゲーションとサイドバーをログイン以外のルートに表示したいということですね。これを行うには、それらとネストされたルートのアウトレットをレンダリングするレイアウト コンポーネントを作成できます。

ネストされたルーティングを使用する

リーリー

ルーティング設定と useRoutes フックを使用する

リーリー

...

リーリー

ルーティング構成とデータルーターの使用 (v6.4.0で導入されました)

リーリー

...

リーリー