Tengo un componente llamado Tasks.js que se representa en la ruta/tareas

 <Route path="/tasks" component={Tasks} />

Dentro de este componente, hago algunas LLAMADAS API y almaceno algún estado y también renderizo un interruptor de enrutador de reacción para renderizar 2 pestañas diferentes

 const Tasks =()=>{ const [count, setCount] = React.useState(0); useEffect(() => { //api calls }, []) return ( <Box> <FiltersAndOtherComponents/> <Switch> <Redirect exact from="/tasks" to="/tasks/my-overview" /> <Route exact path="/tasks/my-overview" component={MyOverview} /> <Route exact path="/tasks/my-work/monthly/:calendarId" component={MonthlyCalendar} /> <Route exact path="/tasks/my-work/weekly/:calendarId" component={WeeklyCalendar} /> </Switch> <Box>) .

El problema es que cuando cambio de /tasks/my-overview a /tasks/my-work y viceversa, el estado del componente se restablece por completo (el componente se vuelve a montar).

¿Cómo puedo arreglar esto? Para cambiar entre rutas en el componente principal y mantener el estado