Quando os botões do navegador de voltar ou avançar são clicados o url muda mas o componente renderizado não. Como posso ouvir esse evento e mudar o componente?
Estou usando Material Ui.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Quando os botões do navegador de voltar ou avançar são clicados o url muda mas o componente renderizado não. Como posso ouvir esse evento e mudar o componente?
Estou usando Material Ui.
Lendo a documentação, soube que o history (que vem na props quando o componente e criado. Por exemplo, o App.js que está renderizando os outros) tem uma método chamado listen(), que escuta os eventos de mudança na url, na stack de navegação para ser mais específico:
history.listen( (location, action) => {
//Logica de roteamento
})O location tem atributos referentes a url, docs: https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#location;
O action tem a ação de navegação. a ação na stack, que foi executa. As de click nos botões de avançar e voltar do navegador são a ação de POP. Docs: https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#action;
Docs do método listen: https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#history.back