React-router: nunca desmonte um componente em uma rota depois de montada, mesmo que a rota seja alterada
Eu tenho um aplicativo React que declara algumas rotas:
<Switch>
<Route exact path={'/'} render={this.renderRootRoute} />
<Route exact path={'/lostpassword'} component={LostPassword} />
<AuthenticatedRoute exact path={'/profile'} component={Profile} session={session} redirect={'/'} />
<AuthenticatedRoute path={'/dashboard'} component={Dashboard} session={session} redirect={'/'} />
<AuthenticatedRoute path={'/meeting/:meetingId'} component={MeetingContainer} session={session} redirect={'/'} />
<Route component={NotFound} />
</Switch>
(AuthenticatedRoute
é um componente idiota que verifica a sessão e chama<Route component={component} />
ou<Redirect to={to} />
, mas finalmentecomponent
é invocado)
Onde basicamente cada componente é montado / desmontado na mudança de rota. Eu gostaria de manter esse aspectoexceto para oDashboard
rota que faz muitas coisas e que eu gostaria de ser desmontado uma vez que não esteja no painel (digamos que você chegue em uma página da reunião, você ainda não precisa montá-lo), mas depois de carregar uma vez no painel, quando você vá para a sua página de perfil, para uma reunião ou o que for, quando você voltar ao seu Painel, o componente não precisará ser montado novamente.
Eu li no doc do roteador React querender ou filhos podem ser a solução, em vez de componente, mas poderíamos misturar rotas com filhos e outros com componente? Tentei muitas coisas e nunca consegui o que queria, mesmo comrender
ouchildren
, meu componente do painel ainda está montando / desmontando.
Obrigado pela ajuda