Escribo este código para crear un formulario de inicio de sesión en la aplicación React. Se utiliza la versión 6 de la biblioteca de rutas. Pero no funciona a return <Navigate to = "/login/"> . Quiero redirigir a las personas que no han iniciado sesión.
PrivateRoute.js
import { useNavigate} from 'react-router-dom'; import { useAuthContext } from '../AuthContext'; const PrivateRoute = ({ children }) => { const { user } = useAuthContext(); const Navigate = useNavigate(); console.log(user); if (user) { return children; } else { return <Navigate to="/login"/>; //→Error } }; export default PrivateRoute;Aplicación.js
import Home from './components/Home'; import SignUp from './components/SignUp'; import Login from './components/Login'; import { AuthProvider } from './AuthContext'; import {BrowserRouter,Route,Routes,useNavigate} from 'react-router-dom'; import PrivateRoute from './components/PrivateRoute'; function App() { return ( <AuthProvider> <div style={{ margin: '2em' }}> <BrowserRouter> <Routes> <Route path="/" element={<PrivateRoute><Home/></PrivateRoute>}></Route> <Route path="/signup" element={<SignUp/>}></Route> <Route path="/login" element={<Login/>}></Route> </Routes> </BrowserRouter> </div> </AuthProvider> ); } export default App;Mensaje de error
react-dom.development.js:14169 Uncaught Error: Component(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.useNavigate devuelve una función y no un componente.
Probablemente quieras algo como
const PrivateRoute = ({ children }) => { const { user } = useAuthContext(); const navigate = useNavigate(); if (!user) { navigate("/login"); return <></>; } return children; };react-router-dom se envía con los dos componentes { Navigate, useNavigate }. si desea usar el componente Navegar, puede importarlo y luego usarlo.
import { Navigate } from 'react-router-dom' // import it directly const PrivateRoute = ({ children }) => { const { user } = useAuthContext(); if (user) { return children; } else { return <Navigate to="/login" /> } };