CODEWITHSUNDEEP
reactjsreact-scroll
Alex Pritchard
Alex Pritchard

Reputation: 13

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.

Upvotes: 1

Views: 8429

Answers (4)

Fasanya Abiola
Fasanya Abiola

Reputation: 1

Add name 'about' to the section to make reference so that the scroll can target it


import React from "react";

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

Upvotes: 0

Dennis
Dennis

Reputation: 11

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.

Upvotes: 1

crls_b
crls_b

Reputation: 720

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.

Upvotes: 1

Pamela Sarkisyan
Pamela Sarkisyan

Reputation: 726

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

Upvotes: -1

Related Questions