Tengo algún tipo de problema cuando uso el enrutador en App.js
Recibo una página en blanco cuando estoy usando, intenté mucho pero no pude encontrar una manera de resolver el problema.
<GuestRoute path="/Authenticate" element={<Authenticate />}> </GuestRoute>está funcionando bien con
<Route path="/Authenticate" element={<Authenticate />}> </Route> pero tengo que usar GuestRoute.
A continuación se muestra el código completo:
Aplicación.js
import "./App.css"; import {BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"; import React from "react" import Navigation from "./components/shared/Navigation/Navigation"; import Home from "./Pages/Home/Home"; import Register from "./Pages/Register/Register"; import Login from "./Pages/Login/Login"; import Authenticate from "./Pages/Authenticate/Authenticate"; const isAuth = true; function App() { return ( <div className="App"> <Router> <Navigation /> {/* switch(prev. versions) ----> Routes (new versions)) */} <Routes> <Route exact path="/" element={<Home />} > </Route> <GuestRoute path="/Authenticate" element={<Authenticate />}> </GuestRoute> </Routes> </Router> </div> ); } const GuestRoute = ({children,...rest}) => { return( <Route {...rest} render={({location})=>{ return isAuth ? ( <Navigate to={{ pathname: '/rooms', state: {from: location} }} /> ):( children ); }} ></Route> ); }; export default App;react-router-dom@6 no usa componentes de ruta personalizados. El nuevo patrón utilizado en v6 son componentes de envoltorio o componentes de ruta de diseño.
Ejemplo de componente contenedor:
const GuestWrapper = ({ children }) => { ... guest route wrapper logic ... return ( ... {children} ... ); };...
<Router> <Navigation /> <Routes> <Route path="/" element={<Home />} /> <Route path="/Authenticate" element={( <GuestWrapper> <Authenticate /> </GuestWrapper> )} /> </Routes> </Router>Ejemplo de componente de ruta de diseño:
import { Outlet } from 'react-router-dom'; const GuestLayout = () => { ... guest route wrapper logic ... return ( ... <Outlet /> // <-- nested routes render here ... ); };...
<Router> <Navigation /> <Routes> <Route path="/" element={<Home />} /> <Route element={<GuestLayout>}> <Route path="/Authenticate" element={<Authenticate />} /> ... other GuestRoute routes ... </Route> </Routes> </Router>