por favor, ayúdame

Cuando la Ruta no está dentro de <Routes> , da un error: Error: A solo se debe usar como elemento secundario del elemento, nunca se representa directamente. Por favor, envuélvalo en un

Cuando está dentro de <Routes> da un error como: Error: [Abc] no es un componente <Route> . Todos los elementos secundarios de deben ser <Route> o <React.Fragment>

¿Por favor me ayudan a resolver esta situación? O alguna sugerencia.

Intenté esto pero uno de los errores anteriores en ambos casos.

Como esto no genera un error, sin embargo, mi componente secundario de la ruta privada no se procesa.

 import React from 'react' import './App.css' import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Header from './components/Header' import Home from './components/Home' import Login from './components/Login' import ProtectedRoute from './components/Helper/ProtectedRoute'; import { UserStorage } from './UserContext'; import User from './components/User'; const App = () => { return ( <div> <BrowserRouter> <UserStorage> <> <Header /> <Routes> <Route path="/" element={<Home />} /> <Route path="login/*" element={<Login />} /> <Route path='/conta' element={<ProtectedRoute/>}> <Route path='/conta' element={<User/>}/> </Route> </Routes> </> </UserStorage> </BrowserRouter> </div> ) } export default App;

RutaProtegida

 import React from 'react'; import { UserContext } from '../../UserContext'; import {Routes, Route, Navigate } from 'react-router-dom'; const ProtectedRoute = (props) => { const { login } = React.useContext(UserContext); if (login === true) return ( <Routes> <Route {...props} /> </Routes> ); else if (login === false) return <Navigate to="/login" />; else return null; }; export default ProtectedRoute;