Si estoy usando react-query y react-router, puedo ver las solicitudes de red que ocurren cuando navego, sin embargo, ¿los nuevos datos no se reflejan en la vista/página? ¿Estoy haciendo algo mal? Estoy haciendo carga diferida:

Aplicación.tsx

 import React, { Suspense } from 'react'; import Loader from '../loader/Loader'; const App: React.FunctionComponent = () => { const Routing = React.lazy(() => import('../routing/Routing')); return ( <> <Suspense fallback={<Loader />}> <DataProvider> <Routing /> </DataProvider> </Suspense> </> ); } export default App;

componente del enrutador:

 import React from 'react'; import { BrowserRouter, Route, Switch} from 'react-router-dom'; import Header from '../header/Header'; import Component1 from './Component1'; import Compontent2 from './Component2'; import { QueryClient, QueryClientProvider } from 'react-query'; import { RouteComponentProps } from "react-router-dom"; const queryClient = new QueryClient() const Routing: React.FunctionComponent = () => { return ( <QueryClientProvider client={queryClient}> <BrowserRouter> <Header /> <div className="App"> <Switch> <Route exact path="/" component={Component1} /> <Route path="/details/:id" render={(props: RouteComponentProps<any>) => <Component2 {...props}/>} /> </Switch> </div> </BrowserRouter> </QueryClientProvider> ) } export default Routing;

Componente 1

 const fetchAll = async () => { const res = await fetch('https:xxxxxx/xxxxx'); return res.json(); }; const { data: result, status } = useQuery('info', fetchAll, { staleTime: 0, });

el componente 2 está utilizando el mismo enfoque que el material de consulta de reacción no está en uso ¿Efecto de algo?

¿Cómo puedo hacer que la vista se vuelva a renderizar en la navegación y muestre los nuevos datos?