[Dúvida] useNavigate no PostCard?

Olá Bruno!

Ótima pergunta! O comportamento que você observou está correto. A diferença entre o uso do hook useNavigate e do componente <Link> está relacionada ao tipo de navegação e à forma como o redirecionamento é tratado.

O hook useNavigate é geralmente utilizado quando você precisa realizar navegações programaticamente, ou seja, quando deseja redirecionar o usuário para uma determinada rota com base em alguma lógica interna do componente, não necessariamente em resposta a um evento de clique do usuário. Com o useNavigate, você tem controle total sobre quando e como a navegação é acionada.

Por outro lado, o componente <Link> é usado para criar links de navegação em um aplicativo de roteamento. O <Link> encapsula o comportamento do clique em um elemento como um botão ou um texto e, ao ser clicado, realiza automaticamente a navegação para o destino especificado pela propriedade to.

No caso específico do componente <PostCard />, se o redirecionamento para outra página é sempre ativado quando o usuário clica em um card, e a rota de destino é estática (ou seja, não muda dinamicamente com base em algum estado ou lógica do componente), o uso do <Link> é a abordagem mais simples e recomendada.

Exemplo do uso do <Link>:

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

const PostCard = ({ postId }) => {
  return (
    <div className="post-card">
      {/* Usando o Link para redirecionar para a página de detalhes do post */}
      <Link to={`/posts/${postId}`}>
        <h2>Título do Post</h2>
        <p>Conteúdo do post...</p>
      </Link>
    </div>
  );
};

Dessa forma, ao clicar no card, o usuário será redirecionado automaticamente para a página de detalhes do post com a URL correspondente.

O useNavigate, por sua vez, é útil quando você precisa realizar navegações de forma programática, como após uma submissão de formulário, após uma ação assíncrona ser concluída ou com base em alguma condição específica do componente.

Espero que isso esclareça a diferença entre o useNavigate e o <Link> e como escolher a abordagem correta para diferentes situações em seu aplicativo. Se você tiver mais dúvidas, sinta-se à vontade para perguntar! Estou aqui para ajudar!

Oi Bruno, tudo bem contigo?

Sobre o useNavigate não ter sido usado no <PostCard />, então assim como você já colocou, ele não foi usado ali, porque o <Link> já conseguia capturar o clique no <button>, ou o atual <BotaoPrincipal> né.

Nesse caso o hook não foi aplicado por uma questão de praticidade e boas práticas sabe, pois o useNavigate tem um uso mais reservado para momentos onde nós temos que configurar o destino do redirecionamento do link para voltar para a página anterior, ou ir para a que você já estava e saiu, ou algum destino não definido.

Em suma, como nos posts nós tínhamos vários itens, cada um com um destino diferente, ele poderia sim ter sido usado ali, mas por uma questão de boas maneiras e visando uma fácil leitura e interpretação do código foi usado o template string para configurar os destinos dos links.

Era isso, caso tenha alguma dúvida, ou precise de algo eu estarei por aqui para ajudar.

Abraços e bons estudos.