1

Closed. This question needs details or clarity. It is not currently accepting answers. Add details and clarify the problem you’re solving. This will help others answer the question. You can edit the question or post a new one.

Closed 40 mins ago.

(Private feedback for you)

Realicé una landing page con React y quisiera viajar por secciones al navegar. Estoy utilizando 'wouter' que un paquete más pequeño que react-router-dom. Lo cual también he probado pero no me permite.

Lo que hice en primer lugar es lo tradicional que es colocar un 'id' al elemento y al dar click en algún enlace me llevara hacia ese 'id' mediante '#' y el nombre. Pero no funciona. Tengo claro que con React trabajamos con componentes. Que estos se reutilizan y que sería incierto saber a que componente se dirige este 'id'. Entonces, lo que hice fue envolverlo y colocar el 'id' de esta manera:

                <section id="hero">
                    <Hero />
                </section>
                <section id="features">
                    <Features />
                </section>
                <section id="testimonial">
                    <Testimonial />
                </section>

Pero aún así no me lleva a la sección que deseo, sino no se mueve de la página.

Si alguno sepa como poder navegar entre secciones de por favor ayudarme. Mil gracias de antemano.

1
  • Lograste hacerlo? Es que veo que nadie te ayudo y quiero hacer lo mismo :c Commented el 22 ene. 2022 a las 16:22

1 respuesta 1

0

puedes crear un nav por ejemplo.

const  Nav = () =>  {

  const links = [{ id: 1, href: "#hero", text: "Section 1"},
                { id: 2, href: "#features", text: "Section 2"},
                { id: "N", href: "#testimonial", text: "Section N"}]

  return( 
   <nav>
     <ul>
       {links.map(link =>
          <a key = {link.id} href={link.href}>{link.text}</a>)}
  
     </ul>
   </nav>

 )
}

y después hay si haces las secciones el id="hero" es como enlazas el nav href: "#hero" con las secciones por ejemplo

    <section id="hero">
                    <Hero />
                </section>
                <section id="features">
                    <Features />
                </section>
                <section id="testimonial">
                    <Testimonial />
                </section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.