hoy meMe encuentro realizando una aplicación en React Js por lo cual me vi en la obligación de tener un context para almacenar la información luego de un inicio de sesión, para así proteger rutas y/o enviar datos de peticiones posteriores dentro del sistema, pero no logro trabajar de forma correcta con el useContext, si alguien pudiera explicarme o darme una mano, hasta el momento tengo un archivo provider en donde declaré mi context
import {createContext} from 'react';
export const userContext = createContext([]);
luegoLuego donde hago el login tengo mis siguiente funciones :
const [usuario, setUsuario] = useContext(userContext);
const autenticar = async (e) => {
e.preventDefault();
try {
const autentificacion = await axios.post('http://localhost:8001/auth', {
user: login.user,
password: login.password
});
setUsuario( autentificacion.data.token, );
localStorage.setItem('token', autentificacion.data.token);
} catch (e) {
console.log("error::"+e)
}
}
Hasta aquí todo bien , pero cuando quiero entrar a otra ruta que no sea / (que es donde se hace la petición del login y paso a otra ruta que es /crear-secreto )
al querer consumir mi contexto, este se pierde, mi app.js está así
function App() {
const providerValue = useMemo(() => ({usuario, setUsuario}, [usuario, setUsuario])) return (
function App() {
const providerValue = useMemo(() => ({usuario, setUsuario}, [usuario, setUsuario]))
return (
<Router >
<Navbar/>
<userContext.Provider value={providerValue}>
<Routes>
<Route exact path="/" element={<LoginPage/>}/>
<Route element= {<PrivateRoute/>} >
<Route exact path="/crear-secreto" element={ <CrearSecreto/>}/>
</Route>
</Routes>
</userContext.Provider>
</Router>
);
}
); }
estoy Estoy utilizado react-router-dom v6