使用 react router dom v6 保護路由渲染沒有返回任何內容

如何使用 react router dom v6 庫保護路由？我正在使用 reactjs 創建我的第一個應用程序，我想知道如何保護路由，在這種情況下，/ dashboard /在此區域中找到的所有路由只能輸入具有憑據的用戶，即已註冊的用戶。

原帖：https : //stackoverflow.com/a/69870303/17222061

錯誤：PrivateRoute(...)：渲染沒有返回任何內容。這通常意味著缺少 return 語句。或者，不渲染任何內容，返回 null。

公共路線（任何人都可以看到這些頁面）

• http://本地主機:3000/
• http://localhost:3000/註冊
• http://localhost:3000/登錄

私有路由（當用戶登錄時）：

• http://localhost:3000/dashboard/
• http://localhost:3000/dashboard/accounting
• http://localhost:3000/dashboard/employee
• http://localhost:3000/dashboard/ecommerce

包.json

"react-router-dom": "^6.0.1",

索引.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

應用程序.js

import AppRouter from "./routers/AppRouter";
import "./css/main.css";

function App() {
  return (
    <>
      <AppRouter />
    </>
  );
}

export default App;

應用路由器

import { Route, Routes } from "react-router-dom";
import HomeView from "../components/views/public/HomeView";
import LoginView from "../components/views/public/LoginView";
import NotFound from "../components/views/public/NotFound";
import RegisterView from "../components/views/public/RegisterView";
import DashboardRoutes from "./DashboardRoutes";
import PrivateRoute from "./PrivateRoute";

const AppRouter = () => {
  return (
    <div>
      <Routes>
        {/* Public routes: */}
        <Route path="/" element={<HomeView />} />
        <Route path="/login" element={<LoginView />} />
        <Route path="/register" element={<RegisterView />} />
        {/* Private routes: */}
        <Route
          path="dashboard/*"
          element={
            <PrivateRoute>
              <DashboardRoutes />
            </PrivateRoute>
          }
        />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
};
export default AppRouter;

儀錶盤路由

import { Routes, Route } from "react-router-dom";
import AccountingHomeView from "../components/views/accounting/AccountingHomeView";
import DashboardHomeView from "../components/views/dashboard/DashboardHomeView";
import EcommerceHomeView from "../components/views/ecommerce/EcommerceHomeView";
import EmployeeHomeView from "../components/views/employee/EmployeeHomeView";
import NotFound from "../components/views/public/NotFound";

const DashboardRoutes = function () {
  return (
    <>
      <Routes>
        <Route path="/" element={<DashboardHomeView />} />
        <Route path="accounting" element={<AccountingHomeView />} />
        <Route path="employee" element={<EmployeeHomeView />} />
        <Route path="ecommerce" element={<EcommerceHomeView />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  );
};

export default DashboardRoutes;

PrivateRoute（這裡的邏輯）

import { Navigate } from "react-router-dom";

const PrivateRoute = function ({ children }) {
  // True or False to emulated login or logout user
  let isAuthenticated = false;
  if (isAuthenticated) {
    return children;
  } else {
    <Navigate to="/login" />;
  }
};

export default PrivateRoute;

錯誤：PrivateRoute(...)：渲染沒有返回任何內容。這通常意味著缺少 return 語句。或者，不渲染任何內容，返回 null。