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 />
</>
)
}```