Tengo una aplicación de reacción en la que los usuarios pueden acceder a la página de inicio solo después de iniciar sesión/registrarse. He usado protectRoutes para implementar esto, sin embargo, recibo el siguiente error dentro del componente del enrutador:
A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.El código para el archivo app.js:
import {useState} from 'react' import './App.css'; import {Routes,Route,Link} from 'react-router-dom' import SignupPage from './Pages/SignupPage'; import LoginPage from './Pages/LoginPage'; import Homepage from './Pages/Homepage'; import PrivateRoute from "./Pages/PrivateRoute"; import {HashRouter as Router} from 'react-router-dom' function App() { const [username,setUsername]=useState(""); const [currentUser,setCurrentUser]=useState({}); return ( <Router> <div className="App"> <Route path="/" exact element={<SignupPage></SignupPage>}/> <Route path="/signup" exact element={<SignupPage currentuser={currentUser} setcurrentuser={setCurrentUser} setusername={setUsername}></SignupPage>}/> <Route path="/login" exact element={<LoginPage></LoginPage>}/> <PrivateRoute path="/homepage" exact currentuser={currentUser} element={<Homepage user={currentUser} username={username} setusername={setUsername}></Homepage>}/> </div> </Router> ); } export default App;¿Cuál es el error aquí y cómo lo soluciono?
Está representando componentes de Route directamente y no los está envolviendo en un componente de Routes .
Refactorice el componente PrivateRoute para representar un componente Outlet en lugar de una Route y envuelva las rutas que desea proteger.
Ejemplo:
import { Navigate, Outlet } from 'react-router-dom'; const PrivateRoute = ({ currentuser }) => { // auth business logic return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />; };...
import { HashRouter as Router, Routes, Route, Link} from 'react-router-dom' function App() { const [username,setUsername]=useState(""); const [currentUser,setCurrentUser]=useState({}); return ( <Router> <div className="App"> <Routes> ... unprotected routes ... <Route path="/" element={<SignupPage />} /> <Route path="/signup" element={( <SignupPage currentuser={currentUser} setcurrentuser={setCurrentUser} setusername={setUsername} /> )} /> <Route path="/login" element={<LoginPage />} /> ... <Route element={<PrivateRoute currentuser={currentUser} />}> ... protected routes ... <Route path="/homepage" element={( <Homepage user={currentUser} username={username} setusername={setUsername} /> )} /> ... </Route> </Routes> </div> </Router> ); }