Escribí un enrutador privado. Funciona correctamente con accesorios pero no redirige cuando los accesorios están mal. ¿Me podrían ayudar con este problema? Aquí hay un fragmento de mi código:
export function PrivateRoute({ children, ...rest }) { const navigate = useNavigate(); const { props } = rest; return ( <Routes> <Route {...rest} render={() => (props === 'admin' ? children : navigate(url))} /> </Routes> );}
Debería usar el component Navigate ya que está en JSX , el useNavigate es para cuando está afuera, así:
import {Navigate} from "react-router-dom" // what to use inside JSX export function PrivateRoute({ children, ...rest }) { const { props } = rest; const navigate = useNavigate(); // that is for when you are outside of JSX navigate("/someRoute"); // how you would redirect when you are outside of JSX // inside JSX, you would use the Navigate component like below. return ( <Routes> <Route {...rest} render={() => (props === 'admin' ? children : <Navigate to ={url}/>)} /> </Routes> ); } import React, { useContext, useEffect } from 'react'; import { BrowserRouter as Router, Routes, Route, Navigate, } from 'react-router-dom'; import { AuthContext } from '../context/AuthContext'; import ChatPage from '../pages/ChatPage'; import LoginPage from '../pages/LoginPage'; import AuthRouter from './AuthRouter'; const AppRoutes = () => { const { auth } = useContext(AuthContext); return ( <Router> <div> <Routes> <Route path="auth/*" element={!auth.logged ? <AuthRouter /> : <Navigate to="/" />} /> <Route path="/" element={auth.logged ? <ChatPage /> : <Navigate to="auth/login" />} /> <Route path="*" element={<LoginPage />} /> </Routes> </div> </Router> ); }; export default AppRoutes;