CODEWITHSUNDEEP
javascriptreactjsreact-router
rpivovar
rpivovar

Reputation: 3438

react-router v3: how to reload page when entering and leaving a specific route

I have a specific route for a single page application that I want to cause the page to completely reload whenever the user enters or leaves this route. 

    <Route
      key={routeKeyGen()}
      path="/example"
      component={Example}
      onEnter={onExampleRoute}
    />

I tried to do this by setting up onEnter to refresh the browser page:


const onExampleRoute = () => window.location.reload();

I quickly realized this was ridiculous when the page kept reloading over and over again. I don't think this handles when leaving the route, either.

Edit Here is the React Router v3 API for Route: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#route

Edit 2: There is an onLeave in the React Router v3 API for Route: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md#onleaveprevstate

Upvotes: 0

Views: 357

Answers (1)

evolon
evolon

Reputation: 1586

The simplest solution with pure React can be:

Load the script programmatically, in the component of the route

If this is your route.js file

<Route path="/path/you/want/to/load/js" component={Page.js} />

In the Page.js component:

class Page extends Component {

   ...

   componentDidMount () {
      const script = document.createElement("script");

      script.src = "https://path/to/your/file.js";
      script.async = true;
      script.onload = this.handleScriptLoad;

      document.body.appendChild(script);
   }

   handleScriptLoad = () => {
      // the script loaded!!!
   }

   ...
}

For more details, you can take a look at here: Adding script tag to React/JSX

Upvotes: 1

Related Questions