Tengo un contexto compartido entre un grupo de páginas de perfil. El contexto es responsable de cargar y configurar el perfil del usuario desde una base de datos, así:

 const Profile = props => { const { userProfile } = useContext(ProfileContext); return userProfile && ( <div className="profile-container"> ...stuff </div> ); }; export default Profile;

...rutas:

 <BrowserRouter> <Header /> <main className="main-container"> <Switch> ...other routes <ProfileContextProvider> <Route path="/profile/:id" exact component={Profile} /> <Route path="/settings" exact component={Settings} /> </ProfileContextProvider> </Switch> </main> <Footer /> </BrowserRouter>

El contexto en sí es muy simple:

 import React, { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; export const ProfileContext = React.createContext({ userProfile: {}, setUserProfile: () => {} }); ProfileContext.displayName = "ProfileContext"; const ProfileContextProvider = props => { const { id } = useParams(); //always undefined! const [userProfile, setUserProfile] = useState(null); useEffect(() => { loadData(); }, []); const loadData = async () => { ...api call to load data }; return ( <ProfileContext.Provider value={{ userProfile, setUserProfile }}> {props.children} </ProfileContext.Provider> ); }; export default ProfileContextProvider;

Sin embargo, ese uso de useParams() allí no funciona. El "id" siempre está indefinido. Si muevo este uso de useParams() al propio componente Profile, funciona bien. Esto no me sirve de nada, porque necesito tomar una decisión sobre la ruta, al cargar datos en el contexto, antes de cargar todo el perfil. ¡Necesito que funcione en el contexto!

es posible? ¿Estoy haciendo algo mal?