0

estoy queriendo realizar lo que dice el titulo, el efecto que hay en las web estaticas con solo html, donde podes realizar un scroll con un elemento seccion podias deslizar hasta elemento que tenga esa id, pense que con react router lo podria lograr pero no consigo lo que quiero, lo que consigo este se reenderize el componente segun la URL pero solo se reenderize y no es lo que busco les dejo mi codigo (no es obligatorio que tenga que utilizar react router).

main.jsx

import ReactDOM from 'react-dom/client'
import { Header } from './components/header/header.jsx'
import './index.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import { Proyects } from './components/proyects/Proyects.jsx'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Header />
  },
  {
    path: '/proyects',
    element: <Proyects />
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

header

import { Logo } from '../../assets/icons'
import { Presentation } from '../presentation/presentation'
import { NavLink } from 'react-router-dom'
import { Proyect } from '../proyect/Proyect'
import { AboutMe } from '../aboutMe/AboutMe'
import { Footer } from '../footer/Footer'
export function Header () {
  return (
    <>
      <nav className='nav'>
        <div className='container-nav'>
          <Logo />
          <ul className='list'>
            <li><NavLink end className={({ isActive }) => isActive ? 'option pro' : 'pending'} to='/proyects'>Proyectos</NavLink></li>
            <li><NavLink end className='option' to=''>Contacto</NavLink></li>
            <li><NavLink end className='option' to=''>Sobre mi</NavLink></li>
            <li><NavLink end className='option' to=''>Descargar CV</NavLink></li>
          </ul>
        </div>
      </nav>
      <Presentation />
      <Proyect />
      <AboutMe />
      <Footer />
    </>
  )
}```

1 respuesta 1

0

No se entiende bien tu pregunta pero si quieres saber como hacer que un scroll a un elemento n se puede hacer de la siguiente forma:

 <h1 id="titulo">Hello CodeSandbox</h1>
 <a href="#titulo">ir al titulo</a>

esto se puede llevar a una implementación entre distintos componentes pero es la misma logica

2
  • Hola xx, bienvenido y gracias por tu colaboración, las respuestas que son solo código, son consideradas de baja calidad, por otro lado, la tuya no puede ser considerada respuesta, ya que no soluciona el problama plantado, te sugiero que la edites, y arregless, así evitarás que sea cerrada y/o recibir votos negativos. Commented el 3 jul. 2023 a las 6:43
  • Hola xx, bienvenido y gracias por tu colaboración, las respuestas que son solo código, son consideradas de baja calidad, por otro lado, la tuya no puede ser considerada respuesta, ya que no soluciona el problama plantado, te sugiero que la edites, y arregless, así evitarás que sea cerrada y/o recibir votos negativos. Commented el 3 jul. 2023 a las 6:43

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.