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

Posted 2023-02-19

【中文标题】使用 react router dom v6 保护路由 渲染没有返回任何内容

【英文标题】：Protect routes with react router dom v6 Nothing was returned from render

【发布时间】：2021-12-26 08:27:01

【问题描述】：

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

原帖：https://***.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。

【参考方案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
  
;

【讨论】：

谢谢！，替换是做什么用的？

@EmmaR。它指示您是否希望导航是 PUSH 或 REPLACE 导航，换句话说，如果它是一个常规导航，将新路径 推送 到历史堆栈，或者它是否应该是重定向和替换历史堆栈上的当前条目。