1

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

1
  • Lo que estas haciendo con 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.
    – g.4
    Commented el 9 ene. 2022 a las 21:58

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.