-1

como faço para lincar do menu atravez do id a um componente utilizando o react?

  • Sobre
  •     <a  href="#Tecnologias">
          <li>Tecnologias</li>
        </a>
    
        <a href="#Projetos">
          <li>Projetos</li>
        </a>
    
        <a href="#Contato">
          <li>Contato</li>
        </a>
      </ul>
    

    utilizando link não de certo ! <

    2 Respostas 2

    0

    Fala Adriano pra linkar uma tag <a> com um outro elemento na mesma página basta colocar um ID no elemento alvo e no href passar esse link.

    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#courses">Courses</a></li>
      </ul>
    </nav>
    <h2 id="about">About</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione neque at
      debitis aperiam excepturi doloribus quos molestias magni sequi libero
      repudiandae explicabo illum, a earum itaque nisi enim delectus dicta sunt
      esse. Nisi, possimus praesentium consequuntur quo aut perferendis numquam
      nesciunt facilis earum perspiciatis voluptatem consectetur doloremque,
      vitae dolorem explicabo vel eveniet, provident autem maxime sunt at!
      Beatae, quos nemo cumque, aspernatur deserunt atque odit dignissimos
      tempora corrupti repellat quae, officiis sed id nisi nostrum dolorum. Modi
      iste magni distinctio nostrum. Impedit consectetur perferendis eaque
      consequatur praesentium, corporis, vero magni eius itaque nulla similique
      quaerat alias sit ea nostrum. Dolore, voluptatem debitis dolorem vel ut,
      molestiae doloremque excepturi dolorum, nobis voluptate quasi. Vero itaque
      a iusto illum accusantium libero cumque culpa facere asperiores molestiae
      numquam, nihil architecto delectus, quas ex atque iste earum reiciendis?
      Voluptatem, nam sunt soluta numquam non saepe, culpa totam quos
      dignissimos minima perferendis. Veniam laboriosam blanditiis facilis
      quidem sit ipsum earum aliquam eveniet culpa voluptates minus perspiciatis
      fugiat iste eligendi corrupti nam, unde quaerat iusto, fuga quos velit hic
      praesentium numquam. Blanditiis, amet id quas reiciendis repellendus
      dolores cumque ullam, enim quod asperiores odio quae aperiam non
      accusantium voluptatum! Earum minus hic sequi repudiandae deleniti
      impedit!
    </p>
    <h2 id="courses">Courses</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione neque at
      debitis aperiam excepturi doloribus quos molestias magni sequi libero
      repudiandae explicabo illum, a earum itaque nisi enim delectus dicta sunt
      esse. Nisi, possimus praesentium consequuntur quo aut perferendis numquam
      nesciunt facilis earum perspiciatis voluptatem consectetur doloremque,
      vitae dolorem explicabo vel eveniet, provident autem maxime sunt at!
      Beatae, quos nemo cumque, aspernatur deserunt atque odit dignissimos
      tempora corrupti repellat quae, officiis sed id nisi nostrum dolorum. Modi
      iste magni distinctio nostrum. Impedit consectetur perferendis eaque
      consequatur praesentium, corporis, vero magni eius itaque nulla similique
      quaerat alias sit ea nostrum. Dolore, voluptatem debitis dolorem vel ut,
      molestiae doloremque excepturi dolorum, nobis voluptate quasi. Vero itaque
      a iusto illum accusantium libero cumque culpa facere asperiores molestiae
      numquam, nihil architecto delectus, quas ex atque iste earum reiciendis?
      Voluptatem, nam sunt soluta numquam non saepe, culpa totam quos
      dignissimos minima perferendis. Veniam laboriosam blanditiis facilis
      quidem sit ipsum earum aliquam eveniet culpa voluptates minus perspiciatis
      fugiat iste eligendi corrupti nam, unde quaerat iusto, fuga quos velit hic
      praesentium numquam. Blanditiis, amet id quas reiciendis repellendus
      dolores cumque ullam, enim quod asperiores odio quae aperiam non
      accusantium voluptatum! Earum minus hic sequi repudiandae deleniti
      impedit!
    </p>
    
    1
    • então mas com react como seria feito da mesma forma mas react-router-dom utlizando <Link/> 14/12/2021 às 17:54
    -1

    import { Link } from 'react-scroll';

        </Link>
    

    dessa forma funcionou muito bem e ainda deu pra animar o scroll<Link to="Tecnologias" spy={true} smooth={true} offset={90} duration={1000} > Tecnologias

    1
    • 1
      Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
      – Comunidade Bot
      14/12/2021 às 19:24

    Você deve fazer log-in para responder a esta pergunta.

    Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .