ナビゲーション バーとサイドバーのないログイン ページをレンダリングするコードを書くのに苦労しています。同様の質問をしているページをいくつか見つけましたが、私の現在の状況に当てはまるものはないようです。
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 コンポーネントにはナビゲーション バーとサイドバーがありますが、これは意図的なものです。 ログイン ページにはナビゲーション バーとサイドバーを持たないようにしたいです
P粉4914214132023-10-25 17:29:41
ナビゲーション バーを非表示にする最も簡単な方法は、ログイン ページ コンポーネントに移動して useLocation() を呼び出すことです。次に、使用場所を宣言した後、次のようにします。それを変数の位置に割り当てます { location.pathname === "/login" ?空: (
ナビゲーション バー コンポーネント全体をレンダリングします);
私が携帯電話で入力している間に読むことができれば別ですが
P粉2486022982023-10-25 10:27:05
質問の意味が理解できれば、ナビゲーションとサイドバーをログイン以外のルートに表示したいということですね。これを行うには、それらとネストされたルートのアウトレットをレンダリングするレイアウト コンポーネントを作成できます。
useRoutes フックを使用する...
リーリー...
リーリー