Quiero representar rutas privadas para usuarios registrados. Por alguna razón, react-router-dom (v6) representa rutas privadas incluso si PrivateRoute devuelve nulo . Además, no pude ver ningún console.logs desde PrivateRoute. ¿Algunas ideas?

EDITAR

Muestra Dashboard cuando va a localhost/dashboard y Settings cuando va a localhost/settings , aunque ambos componentes se pasan a PrivateRoute, que devuelve un valor nulo.

índice.js

 import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter} from 'react-router-dom'; import App from './App'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter> , document.getElementById('root'));

Aplicación.js

 import {Route, Routes} from 'react-router-dom'; import {Home} from './components/Home'; import {Pricing} from './components/Pricing'; import {Dashboard} from './components/Dashboard'; import {Settings} from './components/Settings'; import {Login} from './components/Login'; import {Header} from './components/Header'; import {PrivateRoute} from './components/PrivateRoute'; const App = () => { return ( <div> <Header /> <Routes> <Route path='/' element={<Home/>} /> <Route path='/pricing' element={<Pricing />} /> <PrivateRoute path='/dashboard' element={<Dashboard />} /> <PrivateRoute path='/settings' element={<Settings />} /> <Route path='/login' element={<Login />} /> </Routes> </div> ); }; export default App;

PrivateRoute.js

 export const PrivateRoute = ({path, element}) => { console.log('PrivateRoute'); **// couldn't see this in the console** return null; };