所以我希望有一个或可能更多的路由在未来受到保护,只有在用户经过身份验证的情况下才能访问,但到目前为止,我只有“/dashboard”路由受保护,但当我运行网站时,我的页面上没有任何渲染,只有白色屏幕,控制台上没有错误,只有这个显示在那里。
我也试过只将isAuth三进制交换为伪true或false,但得到的结果相同。
正在加载React元素树...如果这似乎卡住了,请按照故障排除说明进行操作。
这是我的代码:
ProtectedRoute.js
import { Outlet } from 'react-router-dom'
import { AppContext } from '../contexts/AppContext'
import Login from '../pages/Login';
const userAuth = () => {
const {isAuthenticated} = useContext(AppContext);
return isAuthenticated;
}
const ProtectedRoute = () => {
const isAuth = userAuth();
return isAuth ? <Outlet/> : <Login/>
}
export default ProtectedRoute;
App.js
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Home from './pages/Home';
import Login from './pages/Login';
import ProtectedRoute from './utils/ProtectedRoute';
function App() {
return (
<Routes>
<Route path='/' element = {<Home/>} />
<Route path='/login' element = {<Login/>} />
<Route element={<ProtectedRoute/>}>
<Route path='/dashboard' element= {<Dashboard/>} />
</Route>
</Routes>
);
}
export default App;
编辑
我确实有一个无效语法的错误。
EDIT2
我简化了我的代码,还实现了Navigatesill语法错误。
**caught SyntaxError:意外的标记'〈'(在ProtectedRoute.js?电话:021 - 88888888传真:021 - 88888888
ProtectedRoute.js
import React, { useContext } from 'react'
import { Outlet, Navigate } from 'react-router-dom'
import { AppContext } from '../contexts/AppContext'
const ProtectedRoute = () => {
const { isAuthenticated } = useContext(AppContext);
return isAuthenticated ? <Outlet/> : <Navigate to='/login' replace />;
}
export default ProtectedRoute;
2条答案
按热度按时间rta7y2nd1#
正如@ DrewReese指出的那样,我所要做的就是将文件类型从ProtectedRoute.js更改为ProtectedRoute.jsx
eh57zj3b2#
你的代码需要一些修改。你需要用ProtectedRoute Package 你的组件。
ProtectedRoute.js
App.js