首页  >  文章  >  web前端  >  为什么我在 React Router v6 中收到“[PrivateRoute] 不是组件”错误?

为什么我在 React Router v6 中收到“[PrivateRoute] 不是组件”错误?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-29 11:48:02715浏览

Why Am I Getting the

React Router v6 错误:[PrivateRoute] 不是 组件

使用 React Router v6 并创建私有路由时,开发人员可能会遇到错误,指出“[PrivateRoute] 不是 组件。 的所有子组件都必须是。"

问题的根源

当“PrivateRoute”组件未正确渲染时会出现此错误作为“”的子级“”中的组件

解决方案

要解决此问题,请确保将 PrivateRoute 组件定义为 Routes 组件中 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 嵌套在 Route 中,而 Route 又嵌套在 Routes 中。
  • PrivateRoute 组件确定授权并显示如果获得授权,则为 Outlet 组件(子元素)。
  • 如果未经授权,PrivateRoute 将导航到登录页面。

以上是为什么我在 React Router v6 中收到“[PrivateRoute] 不是组件”错误?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn