AJUDA Quando direciono para outra página com o <LINK>, ele não carrega ela pelo início;

Oi Ágatha, tudo bem?

Desculpe a demora em retornar.

Pelo que entendi, você está utilizando o React Router para direcionar para outra página ao clicar em um botão, mas ao fazer isso, a página não carrega do início e sim do ponto onde o botão está posicionado na página principal. É isso mesmo?

Se for esse o caso, o problema pode estar relacionado ao uso do componente <Link> do React Router. Por padrão, quando você utiliza o <Link> para direcionar para outra página, o componente simplesmente atualiza a rota da aplicação e renderiza o componente correspondente à nova rota. Isso significa que a página não é recarregada do zero, como aconteceria se você acessasse a URL diretamente no navegador.

No entanto, em algumas situações, essa abordagem pode não ser a ideal, especialmente se a página de destino contiver algum conteúdo dinâmico que precise ser carregado do zero, ou se você quiser que a página seja sempre exibida a partir do topo.

Para resolver esse problema, você pode utilizar o componente <NavLink> em vez de <Link>. O <NavLink> é semelhante ao <Link>, mas oferece algumas opções adicionais de configuração, incluindo a possibilidade de definir um comportamento de rolagem personalizado para a página de destino.

Por exemplo, você pode usar a propriedade scrollBehavior para definir que a página deve sempre ser carregada a partir do topo, independentemente de onde o usuário estava na página anteriormente. Para isso, basta passar a string "auto" como valor dessa propriedade:

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

<NavLink to="/muaythai" scrollBehavior="auto">
  <button className={styles.imgmodalidades__botao}>
    Mais detalhes
  </button>
</NavLink>

Além disso, você pode usar a propriedade smooth para criar uma animação suave de rolagem até o ponto de âncora especificado na página de destino. Para isso, é necessário usar um pacote externo como o react-scroll.

Por exemplo, você pode criar um componente de botão personalizado que utiliza o react-scroll para rolar suavemente até o ponto de âncora desejado na página de destino:

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

function ScrollLink({ to, children, ...rest }) {
  const handleClick = (event) => {
    event.preventDefault();

    scroller.scrollTo(to, {
      duration: 500,
      delay: 0,
      smooth: 'easeInOutQuart',
      offset: -50, // ajuste opcional do deslocamento
    });
  };

  return (
    <Link to={to} onClick={handleClick} {...rest}>
      {children}
    </Link>
  );
}

<ScrollLink to="muaythai">
  <button className={styles.imgmodalidades__botao}>
    Mais detalhes
  </button>
</ScrollLink>

Espero que essas sugestões possam ajudar a resolver o problema que você está enfrentando.

Um abraço e bons estudos.

Salvou demais! Gratidão