I am navigating to a component that has ajax request, however the ajax call is only called on the first time the component is navigated to. All other routes look ok but this is the route with the problem:

    const history = useHistory();

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

Routes:

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;

Component 2 code:

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;