React Router v6 の「PrivateRoute はではありません」エラーを修正する方法?

React Router v6: プライベート ルート コンポーネントでのエラー

React Router v6 でプライベート ルートを定義するときにエラーが発生します。エラー メッセージには、PrivateRoute コンポーネントが ではないことが示されています。または 成分。この問題は、プライベート ルートが正しく実装されていない場合に発生します。

解決策

PrivateRoute.js で、コードを次のコードに置き換えます。

<code class="javascript">import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  const isAuthenticated = false; // Replace with your authentication logic

  return isAuthenticated ? <Outlet /> : <Navigate to="/home" />;
};

export default PrivateRoute;</code>

route.js で、コードを次のように更新します。

<code class="javascript">...
<PrivateRoute exact path="/">
  <Route exact path="/" element={<Dashboard />} />
</PrivateRoute>
<Route exact path="/home" element={<Home />} /></code>

説明

PrivateRoute コンポーネントは を利用するようになりました。このコンポーネントにより、承認されたときにルートの子をレンダリングできるようになります。 <ナビゲート>コンポーネントは、ユーザーが認証されていない場合にユーザーを特定のページにリダイレクトするために使用されます。

App.js では、ルートを で囲むようにしてください。コンポーネントを作成し、要素 prop を使用してプライベート ルートを指定します。

追加メモ

• isAuthenticated 変数は独自の認証ロジックに置き換える必要があります。
• 認証されていないユーザーがリダイレクトされるパスは、必要に応じてカスタマイズできます。
• 複数のプライベート ルートがある場合は、useAuth コンテキスト フックを使用して、アプリケーション全体で認証状態を共有できます。

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