Is there a way to refresh a route when using react router v5. I have a onClick function which navigates to a route and refetches the data, however that is only if I use history.push('/') I want to refresh the component even if I am just on the same route '/' for example I am currently doing:

is there a better way to navigate programatically in react-router?

currently this handleChange method is in the header component.

const handleChange = (event: any) => {
    setValue(event.target.value);
    if (history.location.pathname === "/") {
        alert('Changing');
        // need to refresh component here?
    }
    history.push('/');
};

routing is:

 <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <Header links={items} locations={Locations} />
          <div className="App">
            <Switch>
              <Route exact path="/" component={home} />
              <Route path="/details/:id" render={(props: RouteComponentProps<any>) => <Detail {...props} />} />
              <Route component={NotFound} />
            </Switch>
          </div>
        </BrowserRouter>
        <ReactQueryDevtools />
      </QueryClientProvider>