Go back com fresh na pagina

Oi Mayron, tudo bem?

Desculpe a demora em retornar.

Primeiramente, obrigada pela pergunta! É sempre bom ver alunos interessados em aprender mais sobre o assunto. Respondendo a sua dúvida, sim, é possível fazer a navegação sem o refresh da página.

Na aula em que o professor ensina como implementar a funcionalidade de voltar, ele utiliza o método goBack() da biblioteca react-router-dom. Esse método, como você bem observou, causa um refresh na página. Mas existem outras maneiras de se fazer a navegação sem esse refresh.

Uma opção é utilizar o componente Link da biblioteca react-router-dom. Esse componente é utilizado para criar links para outras rotas da aplicação e é muito simples de se usar. Por exemplo, imagine que você tem uma rota para a página de contato e quer criar um link para essa página na sua barra de navegação. Você pode fazer isso da seguinte maneira:

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/contato">Contato</Link></li>
      </ul>
    </nav>
  );
}

Note que o to é passado como propriedade para o componente Link, com o valor da rota que você quer acessar. Esse link será renderizado como um elemento a, mas ao invés de causar um refresh na página, ele irá navegar para a rota especificada utilizando o history da aplicação.

Outra opção é utilizar o componente NavLink. Esse componente é similar ao Link, mas possui algumas propriedades adicionais para estilização e indicação de rotas ativas. Por exemplo, imagine que você quer destacar a página atual na sua barra de navegação. Você pode fazer isso da seguinte maneira:

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><NavLink to="/" exact>Home</NavLink></li>
        <li><NavLink to="/sobre">Sobre</NavLink></li>
        <li><NavLink to="/contato">Contato</NavLink></li>
      </ul>
    </nav>
  );
}

Note que no exemplo acima, adicionamos a propriedade exact para o link da página inicial. Isso faz com que o NavLink só seja considerado ativo se a rota for exatamente a raiz (/). Além disso, o NavLink adiciona uma classe active automaticamente quando a rota correspondente está ativa, o que permite a estilização do link de forma diferenciada.

Essas são apenas algumas das opções disponíveis para fazer a navegação sem refresh na página. É importante lembrar que cada situação pode requerer uma solução diferente e que é sempre bom consultar a documentação da biblioteca e experimentar diferentes abordagens.

Espero que tenha te ajudado.

Um abraço e bons estudos.