javascript - 错误:[PrivateRoute] 不是零件。的所有子组件必须是或者
问题描述
我正在使用 React Router v6 并为我的应用程序创建私有路由。
在文件PrivateRoute.js中,我有代码
import React from 'react';
import {Route,Navigate} from "react-router-dom";
import {isauth} from 'auth'
function PrivateRoute({ element, path }) {
const authed = isauth() // isauth() returns true or false based on localStorage
const ele = authed === true ? element : <Navigate to="/Home" />;
return <Route path={path} element={ele} />;
}
export default PrivateRoute
在文件route.js我写成:
...
<PrivateRoute exact path="/" element={<Dashboard/>}/>
<Route exact path="/home" element={<Home/>}/>
我已经完成了相同的示例React-router Auth Example - StackBlitz,文件 App.tsx
有什么我想念的吗?
解决方案
我今天遇到了同样的问题,并根据 Andrew Luca 的这篇非常有用的文章提出了以下解决方案
在 PrivateRoute.js 中:
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
const PrivateRoute = () => {
const auth = null; // determine if authorized, from context or however you're doing it
// If authorized, return an outlet that will render child elements
// If not, return element that will navigate to login page
return auth ? <Outlet /> : <Navigate to="/login" />;
}
在 App.js 中(我在其他一些页面中留下了示例):
import './App.css';
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>
);
}
在上面的路由中,这是私有路由:
<Route exact path='/' element={<PrivateRoute/>}>
<Route exact path='/' element={<Home/>}/>
</Route>
如果授权成功,将显示该元素。否则,它将导航到登录页面。
推荐阅读
- javascript - 如何偏移导航栏锚点,以便导航栏本身不会隐藏内容
- flutter - 如何绘制网格线,使谷歌地图上的可点击方块颤动
- java - Java使用扫描仪进行用户输入来设置数组的大小
- html - 管理页面和抽屉角度中的滚动垂直滚动位置
- python - 将 git 密码提供到交互式 shell 的自动化方法
- reactjs - 正在加载 data.json 文件...导致不加载图像但加载了文本内容
- python - 如何在 bash 中使用 python 读取 JSON 密钥
- wordpress - 第二页后的Wordpress搜索结果页面错误
- python - 运行贡献的命令:“qiskit-vscode.runQiskitCode”失败
- flutter - 没有标题的颤振对话框