Este es mi componente de ruta privada
import React, { useEffect, useState, createContext } from "react"; import Header from "../../components/common/Header/container"; import { Outlet, useNavigate, Navigate } from "react-router-dom"; const PrivateRoute=({ fetchMe })=> { const [type, setType] = useState("sports_keymoments"); const isAuthenticated = localStorage.getItem("authToken"); const [lodar, setLodar] = useState(true); const [user, setUser] = useState({ name: "Ashish" }); const { Provider } = createContext('user'); return isAuthenticated ? ( <> <Provider user={user}> {lodar && <Spin indicator={antIcon} className="loader__full" />} <Header type={type} setType={setType} /> <Outlet context={[type, setType]} /> </Provider> </> ) : ( <Navigate to="/login" /> ); } export default PrivateRoute; Ahora necesito usar el contexto de user en el encabezado y el componente de outlet . Por eso hice esto
const theme = useContext("user"); console.log({theme}) Pero me estoy volviendo indefinido en el theme . Amablemente ayuda con esto.
Debe escribir <Provider value={user}> en lugar de <Provider user={user}>
Contexto.Documentación del proveedor
Deberías echar un vistazo a la documentación de useContext
Primero cree el contexto fuera de su componente y expórtelo
export const UserContext = React.createContext({name: ""});En el componente de su aplicación:
<UserContext.Provider value={user}>En los componentes de sus hijos:
import {UserContext} from "..." const user = useContext(UserContext); console.log(user.name);Cuando usa el contexto, lo crea fuera de su componente de reacción y luego lo usa. Archivos de ejemplo:
contextNews.js
import React, { useState } from 'react'; // This can be whatever you want. Just an example. const placeholder = { dataNews: { title: '', }, setDataNews: () => {}, }; export const ContextNews = React.createContext(placeholder); export const ProviderNews: React = ({ children, dataNewsDefault = {}}) => { const [dataNews, setDataNews] = useState(dataNewsDefault); return ( <ContextNews.Provider value={{ dataNews, setDataNews }} > {children} </ContextNews.Provider> ); };ProviderWrapper.js
import {ProviderNews} from './contextNews' import ComponentUsesContext from './ComponentUsesContext' // You must provider a wrapper // You cannot access context here. const Wrapper = () => { <ProviderNews> {/* your components that will share context go here...*/} <ComponentUsesContext/> </ProviderNews> }ComponentUsesContext.js
import {ContextNews} from './contextNews' const Comp = () => { // have access to properties of the context now... const {dataNews, setDataNews} = React.useContext(contextNews) return null; // whatever you want... }