Estoy trabajando en un pequeño proyecto de React para aprender más sobre él.

El proyecto puede hacer y ver grupos y en los grupos puede almacenar imágenes, videos...

Entonces, el problema es cuando abro uno de esos grupos y mientras estoy en él si trato de cambiar a otro grupo, el componente no se vuelve a representar y tengo la misma información.

Aquí hay algo del código:

aplicación:

 function App() { const [chosenGroup, setChosenGroup] = useState({}); return ( <Router> <Header setChosenGroup={setChosenGroup}/> <Routes> <Route path="/Group/:group_name" element={<Group group={chosenGroup} />} /> </Routes> </Router> ); }

Encabezado (Donde elijo el grupo):

 function Header(props) { const setChosenGroup = props.setChosenGroup; return ( <> <Top> <Image src={SiteLogo} /> <GroupsBtn> MY GROUPS </GroupsBtn> <AllGroupsCont> <AllGroups> {myGroupDB.map((group, index) => { return ( <StyledLink to={`/Group/${group.group_name}`} key={index}> <Group onClick={() => { setChosenGroup(group); }}> {group.group_name} </Group> </StyledLink> ); })} </AllGroups> </AllGroupsCont> </Top> </> ) }

Grupo:

 function Group(props) { const param = useParams(); return ( <Main> <Top> <GroupTitle defaultValue={param.group_name} /> <SaveButton className="saveButtonGroup" src={SaveIcon} /> <DateCreated>Date created: {creationDate}</DateCreated> </Top> <Center> <GridContainer> {group.photos.map((photo) => { <Image src={photo.url} />; })} </GridContainer> </Center> <Bottom> <GoBackBtn onClick={() => navigate(-1)}>GO BACK</GoBackBtn> <SaveBtn>SAVE</SaveBtn> </Bottom> </Main> ) }

Revisé los componentes en el navegador y el estado sí se actualiza, por lo que el problema es otro.