on navigation, component being navigated from renders with new location

[twelve17]

Some of the pages of an app I am working on depend on query param values to render their content. When a user navigates from such a given page to another url, the new component renders as expected, but in the meantime, the old component is rendered once with the new history values.

I've forked the redux-first-router-demo sandbox and added some logging statements to the configuration options, so I can determine the order of operations of:

• the onBeforeChange function
• the onAfterChange function
• the Home component render (function call)

https://codesandbox.io/s/redux-first-router-demo-forked-6vmpt?file=/src/components/Home.js

No other changes have been made to the app.

The test case is:

1. Navigate to the Home page
2. Click on the "DB & GRAPHQL" link

What I am observing is that, on step 2, the Home component function is called after the onAfterChange function is called, so Home "sees" the new path name:

Is this expected behavior? What is happening in our case is that the old component no longer sees the query params it expects, and thus causes errors when it performs certain operations based on those params. So we are finding ourselves having to guard components to essentially not do anything when they appear to be rendered in this scenario, though it seems wrong to need to do so.

[iamsourabhh]

Found anything on it? @twelve17

[twelve17]

Found anything on it? @twelve17

Unfortunately no.