如何修復 React Router v6 中的「[PrivateRoute] 不是元件」錯誤？

錯誤：[PrivateRoute] 不是 ；元件

使用 React Router v6 並嘗試建立私有路由時會發生此錯誤。 PrivateRoute.js 中的給定程式碼嘗試傳回 Route 元件，但它不會這樣匯出。

解決方案：

要解決此問題，請修改PrivateRoute .js 檔案如下：

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
    const auth = null; // determine if authorized, from context or however you're doing it

    // If authorized, return an outlet that will render child elements
    // If not, return element that will navigate to login page
    return auth ? <Outlet /> : <Navigate to="/login" />;
}

export default PrivateRoute;

在App.js 檔案中，確保私有路由定義如下：

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

此修改後的程式碼將確保PrivateRoute 元件被辨識為路由元件，並將在私有路由中正常運作。

以上是如何修復 React Router v6 中的「[PrivateRoute] 不是元件」錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！