Minha aplicação tem telas não privadas nas quais o usuário pode navegar livremente, porém, quando tentar acessar alguma área privada, o usuário é redirecionado para tela de login. Gostaria que assim que o usuário efetuar seu login seja redirecionado de volta à tela onde estava anteriormente, prosseguindo normalmente. Tenho várias páginas na mesma situação.
Seria mais ou menos como em uma loja virtual, onde podemos navegar e consultar produtos, mas ao clicar em comprar, solicita o login. Ao realizar o login retomamos de onde estávamos, na mesma tela de compra.
Tentei usar o history.push() passado o pathname e no status passo a rota da página onde estou para que redirecione de volta a ela após o login.
Meu código na tela do history.push está assim:
history.push({
pathname: '/login',
state: {
path_retorno: '/agendamento',
}
});
Na tela de login uso o useEffect() capturo e armazeno essa rota. Após o login, se existir o path_retorno, redireciono para ela. Aqui está:
const [path_retorno, setPathRetorno] = useState("");
useEffect(() => {
setPathRetorno(props.location.state.path_retorno);
}
}, []);
Até aí ótimo, funciona, só que tenho também o link que chama a mesma tela de login, que é chamada pelo href:
<a href="/login"> Entrar </a>
Aqui está meu problema, se eu tento acessar direto pelo link obtenho erro:
TypeError: Cannot read property 'path_retorno' of undefined
(anonymous function)
39 | useEffect(() => {
> 40 | setPathRetorno(props.location.state.path_retorno);
| ^ 41 | }, []);
42 |
43 |
View compiled
▶ 12 stack frames were collapsed.
Como estou acessando pelo link, não tenho mesmo a propriedade "path_retorno".
Como posso deixar isso funcional para as duas formas de acesso, tanto pelo history.push() quanto pelo href? Ou há uma melhor forma de conseguir esse comportamento?
Agradeço à comunidade