How to use react-router 4.0 to refresh current route? not reload the whole page

Question

\'react-router-dom\' has refresh function here, but I don\'t know how to call this method, also their well formatted document doesn\'t bother to explain this.

windo

Answer 1

This is how I achieved it :

if (currentUrl == newUrl) {
    props.history.push("/temp");
    props.history.goBack();
}

Answer 2

I have the same problem and I have no clue how the refresh does. My solution is to do following two steps.

1. push new path to history
2. reset all states

Then the DOM will rerender with your route.

Answer 3

You could use this little trick. Push a new path in the history like history.push('/temp') and immediately call the history.goBack()

Here the example:

Create an history and pass it to the router:

import { createBrowserHistory } from "history";

export const appHistory = createBrowserHistory();

<Router history={appHistory}>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

then somewhere in your app, change the history:

appHistory.push('/temp');
appHistory.goBack();

In this way the route will "remain" the same, and will be refreshed.

Answer 4

Only this worked for me:

reloadOrNavigate = () => {
  const { history, location } = this.props;
  if (location.pathname === '/dashboard') {
    history.replace(`/reload`);
    setTimeout(() => {
      history.replace(`/dashboard`);
    });
  } else {
    history.push('/dashboard');
  }
};

The answer is similar to the previous one but I needed to add setTimeout function in order to make it work. In my case, I had to refresh the current URL by clicking the logo if I'm on the /dashboard page. First, it goes to extra route /reload (the name is up to you) and then immediately returns. The page becomes white for less than a second and appears with reloaded data. No reloading in browser occurs, it is still SPA which is good.

Answer 5

Here is my solution with react-router-dom's "Redirect":

<Route key={props.notifications.key} path={props.notifications.path} exact render={() => <Redirect to={props.notifications.path + "/update"}/>}/>
<Route key={props.notifications.key + "/update"} path={props.notifications.path + "/update"} exact render={() => <props.notifications.component apis={props.notifications.apis}/>}/>

Answer 6

I solved this by pushing a new route into history, then replacing that route with the current route (or the route you want to refresh). This will trigger react-router to "reload" the route without refreshing the entire page.

if (routesEqual && forceRefresh) {
    router.push({ pathname: "/empty" });
    router.replace({ pathname: "/route-to-refresh" });
}

React router works by using your browser history to navigate without reloading the entire page. If you force a route into the history react router will detect this and reload the route. It is important to replace the empty route so that your back button does not take you to the empty route after you push it in.

According to react-router it looks like the react router library does not support this functionality and probably never will, so you have to force the refresh in a hacky way.