React Router Tabs -- Keep Components Mounted

Question

I have created tabs using React Router, with a different route for each tab. However, I would like to maintain the tab state between tab transitions by keeping the hidden tabs mounted. How do I achieve this? React router remounts each component every time the route switches.

Someone has already asked this question here, but has not received an answer

Ideally I would find a solution which keeps the tabs which are not displayed mounted after they are hit for the first time

Answer 1

I'd have to do a little more digging to confirm this actually works, but reading through React Router docs I found this about the Route component. Using the component prop makes the component remount every time the route changes. But using the other render methods, you might be able to achieve what you're looking for. I'd go with render, but children might work too?