React-router: Optimization in transition example

[zabojad]

I use the transition pattern in few of my projects and I realise that a page will be re-rendered when being left.

I try to implement a shouldComponentUpdate method like this:

    function shouldComponentUpdate(np,ns) {

        if (np.location.pathname == "/") {

            console.log("DO NOT UPDATE INDEX PAGE");
            return false;
        }
        return true;
    }

But the problem is that even when leaving, the page receives its previous props and np.location.pathname is still equal to "/". That seems to be because of how React.cloneElement works...

I tried to check the pathname with context.router.isActive but the context too seems not to be up to date...

Any idea of how could I detect that the page is a leaving page from within the page component it self?

[taion]

See https://github.com/reactjs/react-router/blob/c41309b3cd5ef5bf7e4b6e5219f0aba110557c7a/examples/animations/app.js#L22-L62

[zabojad]

@taion Thank you. I tried to implement this RouteCSSTransitionGroup and I get warnings like this one: Warning: [react-router]context.locationis deprecated, please use a route component'sprops.locationinstead..

Also, it doesn't solve my problem. The page gets re-rendered when being left...

Is this example up to date?

[zabojad]

Yes I confirm, we have exactly the same behavior as with the latest version of that same example. Can you reopen the issue please?

[taion]

It's not intended to be a copy-pastable drop-in thing; just an illustration of a pattern for controlling re-rendering during a transition.