如何修复 React Router v6 中的'PrivateRoute is Not a”错误？

React Router v6：私有路由组件出错

您在 React Router v6 中定义私有路由时遇到错误。该错误消息指出 PrivateRoute 组件不是 组件。或成分。当私有路由执行不正确时，就会出现此问题。

解决方案

在 PrivateRoute.js 中，将代码替换为以下内容：

<code class="javascript">import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  const isAuthenticated = false; // Replace with your authentication logic

  return isAuthenticated ? <Outlet /> : <Navigate to="/home" />;
};

export default PrivateRoute;</code>

在route.js中，按如下方式更新代码：

<code class="javascript">...
<PrivateRoute exact path="/">
  <Route exact path="/" element={<Dashboard />} />
</PrivateRoute>
<Route exact path="/home" element={<Home />} /></code>

解释

PrivateRoute组件现在使用

组件，它允许在授权时渲染路由的子级。 组件用于在未通过身份验证的情况下将用户重定向到特定页面。

在 App.js 中，确保将您的路由包装在 中。组件并使用 element prop 指定私有路由。

附加说明
• isAuthenticated 变量应替换为您自己的身份验证逻辑。
可以根据需要自定义未经身份验证的用户重定向到的路径。

如果您有多个私有路由，则可以使用 useAuth 上下文挂钩在整个应用程序中共享身份验证状态。

以上是如何修复 React Router v6 中的'PrivateRoute is Not a”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！