'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.

reactjs react-scroll

Solution 1:^[1]

Changes:

import React from "react"; is added at the top of the files
Components should be imported into App.js

Example:

{root-dir}/components/navBar.js:

import React from "react";
import { Link } from "react-scroll";

const NavBar = () => {
  return (
    <div>
      <Link to="about" spy={true} smooth={true} offset={50} duration={500}>
        About
      </Link>
    </div>
  );
};

export default NavBar;

{root-dir}/components/aboutSection.js:

import React from "react";

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

export default About;

App.js:

import React, { Component } from "react";
import NavBar from "./components/navBar";
import About from "./components/aboutSection";

export default class App extends Component {
  render() {
    return (
      <>
        <NavBar />
        <About />
      </>
    );
  }
}

Solution 2:^[2]

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.

Solution 3:^[3]

This bug is likely caused by a styling issue in CSS. I had the same challenge. In my case, the bug was from the styling in my root element, I had the following style:

html {
    height: 100vh; 
}

Everything works fine after I removed the height property. For anyone having a similar challenge, I'll recommend going through your CSS to see which rule is causing the bug.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Pamela Sarkisyan
Solution 2	crls_b
Solution 3	Dennis

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]