Estaba aplicando autenticación en mi proyecto en React.js usando rutas protectes. Primero estaba usando el componente Redirect de react-router-dom, pero luego descubrí los cambios que hicieron en react-router-dom y apliqué el componente de navegación.

 import {BrowserRouter,Routes,Route,Navigate} from 'react-router-dom'; import './App.css'; import Navigation from './components/shared/Navigation/Navigation'; import Authenticate from './pages/Authenticate/Authenticate'; import Home from './pages/Home/Home'; import Login from './pages/Login/Login'; import Register from './pages/Register/Register'; const isAuth = true; function App() { return ( <div className="App"> <BrowserRouter> <Navigation/> <Routes> <Route exact path='/' element={<Home/>}></Route> {/* <Route exact path='/register' element={<Register/>}></Route> <Route exact path='/login' element={<Login/>}></Route> */} {/* <Route exact path='/authenticate' element={<Authenticate/>}></Route> */} <GuestRoute exact path='/authenticate' element={<Authenticate/>}></GuestRoute> </Routes> </BrowserRouter> </div> ); } const GuestRoute = ({children,...rest}) =>{ return( <Route {...rest} render = {({location})=>{ return isAuth ?( <Navigate to = '/rooms'state = {{from : location}} replace /> ) :( children ) }}></Route> ) } export default App;

Este es mi código después de usar el componente de navegación, mi pantalla no muestra nada, debe haber algún tipo de error lógico en él. Amablemente ayúdame a resolver este error.