我一直在为一个网站(from a YouTube video)开发react登录服务，我遇到了一个问题，首先，JavaScript不是我特别擅长的语言，我对react知之甚少，所以请原谅我对这个主题的知识有任何漏洞。
我尝试创建一个名为PrivateRoute的上下文，它作为一个只有登录用户才能访问的Route。当/扩展名位于Route标记下时，网站可以正常工作，但当我将其更改为自定义PrivateRoute标记时，它说我不能调用Routes标记内的Route标记以外的任何内容。我相信我正在观看的视频使用的是不同版本的NPM，并做出React，所以这可能是很多问题的原因。如果是这样的话，实现一个只有登录用户才能访问的网站的常见做法是什么？
这是我目前的代码;我相信只有两个适用的文件，但请评论，让我知道，如果任何额外的文件将是有帮助的！

./上下文/私有路由.js

import React from 'react';
import { Route, Navigate } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

export default function PrivateRoute({ element: Element, ...rest }) {
    const { currentUser } = useAuth();
 
    return (
        <Route 
            {...rest} 
            render={props => {
                return currentUser ? <Route {...rest} element={<Element {...props} />} /> : <Navigate to="/login" replace={true} />;
            }}  
        />
    );
}

./组件/应用程序js

import React from "react";
import Signup from './Signup';
import Dashboard from './Dashboard';
import Login from './Login';
import { Container } from 'react-bootstrap';
import { AuthProvider } from '../contexts/AuthContext';
import {BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';

function App() {
  return (
    <Container className="d-flex align-items-center justify-content-center" style={{ minHeight: "100vh" }}>
      <div className="w-100" style={{ maxWidth: "400px" }}>
        <Router>
          <AuthProvider>
            <Routes>                                                  //Issue here, will not
              <PrivateRoute exact path="/" element={<Dashboard />} /> //allow PrivateRoute tag
              <Route path="/signup" element={<Signup />} />           //inside Routes tags
              <Route path="/login" element={<Login />} />
            </Routes>
          </AuthProvider>
        </Router>
      </div>
    </Container>    
  );
}

export default App;

我曾尝试将PrivateRoutes和Dashboard转换为一个文件/函数，但遇到了很多错误。我相信问题可能出在我使用的React版本中的某个地方，加上我对版本之间的变化缺乏了解。提前感谢您的帮助！
编辑：我现在已经重新制作了PrivateRoutes文件，但没有效果。我仍然得到错误代码Uncaught Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>，我相应地更新了上面的文件。