reactjsreact-scroll

React-Scroll - Link not working - appears as empty <a> tag in html

UPDATE 2: Solved. It was due to poor styling. I have a background div in my app that I had set overflow: auto; and it was stopping react-scroll from working. It wasn't even needed. I deleted it and it fixed the problem.

UPDATE: I thought it a good idea to be clearer and so I've copied my project into a codesandbox. I'm still getting the same issues in the sandbox. If anyone can see any issues, I'd sure like your help.

I'm trying to create my first portfolio page.

I'm trying to implement a smooth scroll when I click on a link in my Nav component to other components, for example this About component. I'm using react-scroll.

This is my Nav.js component.

import { Link } from "react-scroll";

const NavBar = () => {

  return (
      <div className={`${classes.navbar} ${navBarDarkLightClasses}`}>
        <Link to="about" spy={true} smooth={true} offset={50} duration={500}>
          About
        </Link>
      </div>
  );
};

export default NavBar;

And here is my About.js component that I want to link to.

const About = () => {
  return (
    <section>
      <div id="about" className={classes.image}>
        <img src={profilePhoto} alt="profile photo"/>
      </div>
    </section>
  );
};

export default About;

However. Nothing happens. When I view the html in the browser the link appears as About and includes no href as I would expect it should.

Any help greatly appreciated.

Solution

  • There's nothing wrong with your code, as far as I can see. However, maybe you have some issues with your classes and/or styling.

    The link rendered shouldn't have any href. The Link component should be handling the scroll without it.

    You can take a look at this working example sandbox based on your provided code. Then, maybe, you can quickly figure out the problem with your code.