1

mi pregunta es sencilla y complicada: De qué manera manejar la navegacion entre secciones en una misma pagina con React? La verdad ya no tengo idea, veo sobre el uso de ref y cosas asi pero vamos, los ejemplos son tan sencillos y simples que no hay manera, no resuelve ninguna duda. Aparte que todo se hace casi que en una misma funcion en un mismo archivo y asi simplemente no va nada en la realidad.

Ok, de ejemplo, el manejo normal de navegacion entre secciones (sin react) seria algo de tipo:

<a href="#seccion1">Ir a seccion 1<a/>

<div id='seccion1'> Contenido <div/>

esto me llevaria a ver el contenido en la seccion1, cierto?

pero en React, y con React Router manejas algo del estilo

<Router>
 <Link to='/' exact>Inicio<Link/>
 <Link to='/seccion1'>Seccion 1<Link/>

 <Switch>
    <Route path='/'>
       <Inicio />
    </Route>

    <Route path='/seccion1'>
        <Seccion1 />
    </Route>
  </Switch>
</Router>

es la navegacion que salta entre paginas y renderiza un componente u otro segun la ruta, cierto?

Pues, el problema que quiero resolver es la navegacion en una misma pagina, imaginen que tenemos una landing con esto:

<Router>
 <Route path='/'>
  <Inicio />
  <Seccion1 />
  <Seccion2 />
  <SeccionN />
 </Route>
</Router>

Este es mi ruta inicial, muestra todos estos componentes que forman parte de una misma landing page, pero que llegado un caso debes hacer scroll para llegar a cada seccion , cierto?

Esa es la duda, obviamente con react router manejaria un <Link to='/equisCosa'> y cada seccion tendria una pagina "particular" para su contenido. Pero el caso que quiero es mantenerme en la misma ruta inicial, pero moverme hasta determinada seccion que seria un componente cualquiera dentro de la misma landing inicial, sin cambio alguno de ruta. O sea, mi pregunta es debo trabajarlo con etiquetas <a></a> con sus href en lugar de <Link to=''>? De verdad no se, como dije, en la documentacion de react se habla sobre el paso de ref pero no entendi absolutamente nada, esta claro que soy hiper novato en esto, y leer la documentacion me genera mas dudas que respuestas, por eso pido una ayuda mas "organica" de su parte.

6
  • agrega tu código y explica que es lo que deseas hacer, explica tu código y explica también el error que recibes, de lo contrario es casi imposible que recibas ayuda
    – Enzo
    Commented el 17 mar. 2021 a las 22:06
  • amigo, entiendo lo que dices, pero tu no entiendes lo que yo digo, con todo respeto. Podria ponerte el codigo que esta en la documentacion de react y react router pero no tendria sentido como dije, no entiendo el manejo en la realidad. Solo pido un poco de orientacion en el manejo de esas 2 cosas. De hecho eliminare el comentario entre las dudas, agregare negritas para hacer enfasis y dejare solo las 2 preguntas porque quizas se distraen Commented el 17 mar. 2021 a las 22:48
  • es por eso que dije de lo contrario es casi imposible que recibas ayuda por que me tome varios minutos para poder entender tu pregunta y no tuve éxito, agrega el código de react y react router como tu dices y explícalo mostrando el código para saber a que te estas refiriendo y poder ayudarte.
    – Enzo
    Commented el 17 mar. 2021 a las 22:51
  • te agregare un ejemplo de lo que entendi de tu pregunta
    – Enzo
    Commented el 17 mar. 2021 a las 22:52
  • lo que tratas de hacer es tener distintas rutas en una sola vista? mediante vas haciendo scroll cambias dinámicamente de ruta?
    – Enzo
    Commented el 18 mar. 2021 a las 1:26

2 respuestas 2

1

para poder hacer una navegación entre secciones como tu dices primero debes tener en cuenta el concepto de componente, un componente podrías pensarlo como una etiqueta html que en algún futuro podrías llegar a reutilizar, no una ni dos, sino todas las veces que quieras, para poder navegar entre paginas desde una sola, podrías crear un componente header que maneje esa lógica

import { Link } = 'react-router-dom'

const Header = () => {
  return(
    <header>
      <nav>
        <Link to="/home">
          Home page
        </Link>
        <Link to="/dashboard">
          Dashboard
        </Link>
        <Link to="/profile">
          Profile
        </Link>
      </nav>
    </header>
  )
}

y este componente llevarlo hacia un componente que contenga las rutas dentro de un Switch

import HeaderComponent from './Header'

const App= () => {
  return(
    <BrowserRouter>
      <HeaderComponent /> //componente que contiene el header con los links
      <Switch>
        <Link path="/home" componente={ /* my component */} exact/>
        <Link path="/dashboard" componente={ /* my component */} />
        <Link path="/profile" componente={ /* my component */} />
      </Switch>
    </BrowserRouter>
  )
}

de esta manera tendrás un header donde tendrás link que redirecciona al usuario a diferentes rutas y el header seguirá apareciendo sin importar en que ruta te encuentres.

1
  • bien, me doy cuenta que no me habias entendido nada amigo jajaja. Todo esta perfecto pero eso es el manejo basico que conozco y no es lo que requiero. Ahora actualice y agregue codigo y mas ejemplo de lo que quiero lograr, a ver si se me entiende mejor. De todas formas gracias por tomarte el tiempo Commented el 17 mar. 2021 a las 23:36
1

Si, usando el tag <a></a> con href al id o className de la sección se logra navegar en la misma página de una manera básica. Por ejemplo yo lo haría de este modo:

const  Nav = () =>  {

  const links = [{ id: 1, href: "#section1", text: "Section 1"},
                { id: 2, href: "#section2", text: "Section 2"},
                { id: "N", href: "#sectionN", text: "Section N"}]

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

 )
}


const Sections = ({sections})  => {

  return (
       {sections.map(section =>
          <Section key = {section.id} {...section}/>)}
  )

}



const Section = ({id, ...})  => {

  return (
   <div  id={id}>  ... el contenido de la sección..</div>
  )

}
     

Al igual que @Mariw te recomiendo usar la librería react-scroll para un efecto smooth scroll en lugar de los tags.

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