使用 react router dom v6 保护路由 渲染没有返回任何内容

Question

如何使用 react router dom v6 库保护路由？ 我正在使用reactjs创建我的第一个应用程序，我想知道我如何保护路由，在这种情况下，在该区域/ dashboard /找到的所有路由只能输入有凭据的用户，即注册的用户。

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

错误：PrivateRoute(...)：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

公共路线（任何人都可以看到这些页面）

• http://localhost:3000/
• http://localhost:3000/register
• http://localhost:3000/login

私人路由（当用户登录时）：

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

package.json

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

Index.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")
);

App.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。

Answer 1

你需要从PrivateRoute返回有效的JSX，即return <Navigate to="/login" replace />;。

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