Me 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([]);
Luego 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 (
<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 utilizado react-router-dom v6
useMemo
no parece un patrón común al usar context; sugiero revisar las siguientes publicaciones (publicacion1 , publicacion2) y verificar que el contexto este bien implementado, puede que solo sea un problema de implementación.