所以我希望有一个或可能更多的路由在未来受到保护，只有在用户经过身份验证的情况下才能访问，但到目前为止，我只有“/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;