React Router v6 で「[PrivateRoute] はコンポーネントではありません」というエラーが発生するのはなぜですか?

React Router v6 エラー: [PrivateRoute] は ではありませんコンポーネント

React Router v6 を使用してプライベート ルートを作成すると、開発者は「[PrivateRoute] は コンポーネントではありません。 のすべてのコンポーネントの子は、

問題の原因

このエラーは、「PrivateRoute」コンポーネントが適切にレンダリングされていない場合に発生します。 「」の子として「」内のコンポーネントこの問題を解決するには、以下に示すように、PrivateRoute コンポーネントが Routes コンポーネント内の Route コンポーネントのネストされた子として定義されていることを確認します。

この改訂されたコードでは:

PrivateRoute は Route 内にネストされ、さらに Route 内にネストされます。

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

const PrivateRoute = () => {
  const auth = null; // Determine if authorized

  // Return outlet if authorized, navigate to login otherwise
  return auth ? <Outlet /> : <Navigate to="/login" />;
};

// App.js
import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Home from "./components/pages/Home";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import PrivateRoute from "./components/routing/PrivateRoute";

const App = () => {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<PrivateRoute />}>
            <Route exact path="/" element={<Home />} />
          </Route>
          <Route exact path="/register" element={<Register />} />
          <Route exact path="/login" element={<Login />} />
        </Routes>
      </Fragment>
    </Router>
  );
};</code>

PrivateRoute コンポーネントは承認を決定し、表示します。承認されている場合は、Outlet コンポーネント (子要素)。

承認されていない場合、PrivateRoute はログイン ページに移動します。

以上がReact Router v6 で「[PrivateRoute] はコンポーネントではありません」というエラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。