Question 45077 in Html Question posted in
Some basic documentation can be found here.

How to scroll to an element with React – Html

I’m feeling stupid cause i did the entire site but I’m stuck trying to make the navlinks scroll in the components of the same page.

My App.js

import Header from './components/Header';
import Intro from './components/Intro';
import Experience from './components/Experience';
import Skills from './components/Skills';
import Projects from './components/Projects';
import Arts from './components/Arts';
import Graduation from './components/Graduation';
import Footer from './components/Footer';

import styled from 'styled-components';

const AppContainer = styled.div`
    width: 100%;
`;

function App() {
  return (
    <AppContainer>
      <Header />
      <Intro />
      <Experience />
      <Skills />
      <Projects />
      <Arts />
      <Graduation />
      <Footer />
    </AppContainer>
  )
}

export default App;

My Header

function HeaderMenu() {
    return (
        <ul>
            <li><a href='#projects'>Projects</a></li>
            <li><a href='#skills'>Skills</a></li>
            <li><a href='#contact'>Contact</a></li>
        </ul>
    )
};

export default HeaderMenu;

What i already have tried and didn’t worked: use the hashtag (like html-css), "react-scroll", useRef.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Problem solved.

    I needed to install this:

    npm install --save react-router-hash-link

    On App.Js

        import { BrowserRouter } from 'react-router-dom';

    function App() {
  return (
    <BrowserRouter>
      <Header />
      <Intro />
      <Experience />
      <Skills />
      <Projects />
      <Arts />
      <Graduation />
      <Footer />
    </BrowserRouter>
  )
}

    I put an id on every component i wanted to use.

    <ExperienceContainer id="experience">
<ProjectsContainer id="projects">

    On header

    import { HashLink as Link } from 'react-router-hash-link';

const StyledLink = styled(Link)`
    text-decoration: none;
    color: #000000;
`

function Header() {
    return (
        <ul>
            <li><StyledLink to="#experience">Experience</StyledLink></li>
            <li><StyledLink to="#projects">Projects</StyledLink></li>
        </ul>
    )
};

export default Header;

    Hope it helps somebody new to React.


Please signup or login to give your own answer.

Back To Top
Search