`CacheSwitch` re-mount the same component if path changes

CJY0208 / react-router-cache-route

Route with cache for react-router V5 like <keep-alive /> in Vue

https://www.npmjs.com/package/react-router-cache-route

MIT License

1.14k stars 110 forks source link

`CacheSwitch` re-mount the same component if path changes #158

Open nomyfan opened 1 year ago

nomyfan commented 1 year ago

In Switch, the component will not be re-mounted even if the path changed. Here's a demo to reproduce. https://stackblitz.com/edit/vitejs-vite-4923pg?file=src/App.tsx

Type something in the input, click Go button, then the component under CacheSwitch will be re-mounted.
Clear the input, and click Go button, the component under CacheSwitch will be re-mounted.

nomyfan commented 1 year ago

Switch uses React.Children.forEach to capture the matching element, while CacheSwitch uses React.Children.map to return an array(React assigns keys to each child in the array).