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 ponent every time the route switches.

Someone has already asked this question, 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

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 ponent every time the route switches.

Someone has already asked this question, 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

• javascript
• reactjs
• tabs
• react-router

• 1 if you want to maintain state for several ponents you would need a parent ponent that is not re-mounting or a state manager like redux. – Sagiv b.g Commented Oct 12, 2017 at 16:58
• 1 @Sag1v thank you! I would much rather keep track of the ponent states inside the ponents themselves, I really just want to leave the ponents mounted within one session between switching tabs – kat Commented Oct 12, 2017 at 17:01
• i don't think there's a "clean" way of doing it other than the good practice and design pattern of react and its tools. maybe you could save it in local storage, but i advice against that. state is a memory object that belongs to instance of a class (React.ponent class), when you destroy the class you destroy this object. the orthodox approach is to lift the state up to a mon parent or save it externally via a state manager like redux – Sagiv b.g Commented Oct 12, 2017 at 17:09
• 2 Did you solve this issue? I'd be very interested in a solution – Unforgiven Commented Jul 15, 2020 at 9:57

2 Answers 2

This is the remended method of routing by react-router-dom-v5 doc over render,children and ponent prop of <Route/>. This way our ponent gets re-initialized & re-mounted everytime path is matched.

 <Switch>
    <Route exact path="/">
       <Home />
    </Route>
    <Route path="/contact">
       <Contact />
    </Route>
    <Route path="/about">
       <About />
    </Route>
 </Switch>

As you(Kat) want to maintain the tab state between tab transitions by keeping the hidden tabs mounted.

• you can achieve this by mounting all the tabs at once and then switch between the tabs by using react-router-dom's pathname.

const { pathname } = useLocation();
{pathname === "/" ? <Home/> : null}
{pathname === "/contact" ? <Contact/> : null}
{pathname === "/about" ? <About/> : null}

• This way your ponent will not get re-initialized and re-mounted everytime path is matched and hence ponent states will not be disturbed and will be taken care of automatically accross the tabs.
• Here is the working DEMO: https://codesandbox.io/s/react-router-experiment-ilfhq?file=/src/ponent/Home.js:166-201
• Hope I answered your question.
• Here is the second solution DEMO using CSS: https://codesandbox.io/s/react-router-mouted-routes-32dxf?file=/src/App.js

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 ponent. Using the ponent prop makes the ponent 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?