v5

React-router Route

This example shows the caching of state and dom respectively

where the counter in the Home tab is not updated due to route changes because it is quiesced. And the list in the list tab will always remember the last position after scrolling, because it is also quiesced.

Of course, after clicking the clear button, the cache state of the counter and the list will be cleared.

React-router Switch

This example uses the relevant features of Switch

Title: StillnessSwitch

The StillnessSwitch here is based on the withRouter wrapper component, as stated in the brief, react-stillness-component is the base library, which can be combined and wrapped on it again

Because the official switch unloads the other routes by default, the component encapsulated here retains the match function of switch, but also does caching for the routes, so that each route is stillness by default, and if you want to control it yourself, you can also support it through various native capabilities, such as: props, compared to the original code, just do not uninstall other routes only

If you have a better idea, welcome to discuss!