Estoy navegando a un componente que tiene una solicitud ajax, sin embargo, la llamada ajax solo se llama la primera vez que se navega al componente. Todas las demás rutas se ven bien, pero esta es la ruta con el problema:

 const history = useHistory(); onClick={() => history.push(`/details/${id}`}

Rutas:

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

Código del componente 2:

 import React from 'react'; import { RouteComponentProps, useLocation } from "react-router-dom"; import { useQuery, useQueryClient} from 'react-query'; const Component2: React.FunctionComponent<RouteComponentProps<any>> = (props) => { const { state } = useLocation<stateType>(); let id = props.match.params.id; const fetchData = async () => { const res = await fetch(`/detail/${id}`); return res.json(); }; const { data, status } = useQuery('chartInfo', fetchData, { staleTime: 5000, }); return ( {status === 'error' && ( <div className="mt-5">Error fetching data!</div> )} {status === 'loading' && ( <div className="mt-5">Loading data ... </div> )} {status === 'success' && ( <div className="mt-5"> // data binded here </div> )} ) } export default Component2;