React Router v6 で「エラー: [PrivateRoute] はコンポーネントではありません。すべてのコンポーネントの子は または \ である必要があります」を修正する方法?

エラー: [PrivateRoute] は ではありません。成分。 のすべてのコンポーネントの子。 である必要があります。または

React Router v6 では、プライベート ルート コンポーネントが有効な Route コンポーネントではないことを示すエラーが発生する場合があります。この問題は、プライベート ルート コンポーネントが適切に定義または構成されていない場合に発生します。

この問題を解決するには、次の手順に従います。

PrivateRoute コンポーネント

PrivateRoute コンポーネントが有効な React Route コンポーネント。この例では、PrivateRoute コンポーネントに構文エラーがあります。

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot;  />;

後の / を ="/Home" に置き換える必要があります。二重右山括弧:

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot; ></Navigate>;

ルート構成

ルート構成で、プライベート ルートが適切に定義されていることを確認してください。あなたの例では、

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard/>}/>

要素の小道具に閉じ山括弧が欠落しているため、これは機能しません。正しいコードは次のとおりです:

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard />} />

または、条件付きレンダリング アプローチなど、別の方法を使用してプライベート ルートを設定することもできます。

<Route exact path='/' element={<PrivateRoute/>}>
  <Route exact path='/' element={<Dashboard/>}/>
</Route>

この例では、 PrivateRoute コンポーネントは、認証ステータスに基づいてダッシュボード コンポーネントをレンダリングするかどうかを決定します。

結論

PrivateRoute コンポーネントが適切に定義され、ルート構成が正しいことを確認することで、問題を解決できます。エラー エラー: [PrivateRoute] は ではありません。成分。 のすべてのコンポーネントの子。 である必要があります。または

以上がReact Router v6 で「エラー: [PrivateRoute] はコンポーネントではありません。すべてのコンポーネントの子は または \ である必要があります」を修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。