0

Soy un nuevo desarrollador, actualmente me encuentro realizando un portafolio, y no lo hice por HTML básico, sino cree un proyecto de React V6. El inconveniente que tengo, es que no puedo desplazarme a la sección mediante #id como se suele manejar en un portafolio de HTML. He intentado con Routes / Route y no consigo hacerlo.

Algun consejo, para replicar el siguiente codigo en React?

    <div class="collapse navbar-collapse" id="ftco-nav">
        <ul class="navbar-nav nav ml-auto">
          <li class="nav-item"><a href="#home-section" class="nav-link"><span>Home</span></a></li>
          <li class="nav-item"><a href="#about-section" class="nav-link"><span>About</span></a></li>
          <li class="nav-item"><a href="#resume-section" class="nav-link"><span>Resume</span></a></li>
          <li class="nav-item"><a href="#services-section" class="nav-link"><span>Services</span></a></li>
          <li class="nav-item"><a href="#skills-section" class="nav-link"><span>Skills</span></a></li>
          <li class="nav-item"><a href="#projects-section" class="nav-link"><span>Projects</span></a></li>
          <li class="nav-item"><a href="#blog-section" class="nav-link"><span>My Blog</span></a></li>
          <li class="nav-item"><a href="#contact-section" class="nav-link"><span>Contact</span></a></li>
        </ul>
      </div>
1
  • supongo que lo que quieres es tener un navbar donde al presionar un elemento, react haga scroll hasta donde se encuentra el elemento?
    – Ivandez
    Commented el 17 ago. 2022 a las 17:07

3 respuestas 3

2

Si estas utilizando alguna biblioteca de estilos como bootstrap y no vez el resultado, esto puede ser por la propiedad class que en react es sustituida por className, aqui te dejo un link de la documentación de react js

Doc: https://www.reactjstutorials.com/react-advanced/17/react-class-name

Si no estas utilizando ninguna libreria de estilos se necesita mas información acerca de tu problema, espero te haya servido amigo, saludos

0

Podrías scrollear la ventana directamente a ese componente html con javascript así:

document.getElementById('idDeSeccion').scrollIntoView();
0

Puedes hacer uso del hook useRef el cual se puede utilizar para acceder a los elementos del DOM.

//Importar el hook
import { useRef } from 'react'

//Declarar la constante que se va a exportar al final
const Home = () => {
  //Declarar las constantes para cada sección
  const homeSection = useRef()
  const aboutSection = useRef()
  const resumeSection = useRef()

  //Declarar las constantes que harán el scroll
  const scrollTohome = () => homeSection.current.scrollIntoView()
  const scrollToAbout = () => aboutSection.current.scrollIntoView()
  const scrollToResume = () => resumeSection.current.scrollIntoView()

  //Maquetar el HTML
  return (
    <div className='collapse navbar-collapse' id='ftco-nav'>
      <ul className='navbar-nav nav ml-auto'>
        <li className='nav-item' onClick={scrollTohome}><span>Home</span></li>
        <li className='nav-item' onClick={scrollToAbout}><span>About</span></li>
        <li className='nav-item' onClick={scrollToResume}><span>Resume</span></li>
      </ul>
    </div>
    <div className='any-class-for-div' ref={homeSection}>
      ...
    </div>
    <div className='any-class-for-div' ref={aboutSection}>
      ...
    </div>
    <div className='any-class-for-div' ref={resumeSection}>
      ...
    </div>
  )
}

export default Home

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.