0

I am following tutorials online for how to use react-scroll but I cant seem to get it working for me

I am using the Link tag from react-scroll and setting the 'to' attribute to the id of the div I want to scroll to. But when I view the live code the Link I have renders as text and appears to be unclickable.

import { Link } from "react-scroll";

const OpenBlurb = () => {
  return (
    <div className="blurb-container">
      <h1>Welcome</h1>
      <Link to="projects" smooth={true} duration={500} offset={50}> My Projects </Link>
    </div>
  );
};

export default OpenBlurb;

I want the 'My Projects' link to smooth scroll down the page to another component with the id 'projects'

const SecondSection = () => {
  return (
    <div className="second-container" id="projects" >
      <h2>My Projects</h2>

    </div>
  );
};

export default SecondSection;

Can anyone see what I am doing wrong?

deechris27
  • 2,080
  • 3
  • 9
  • 30
Louise
  • 3
  • 1

1 Answers1

0

I am guessing "projects" are not identified as an ID.

Have you tried using to="#projects"?

Take a look at these, they might help:

How to scroll to an element?

react-scroll | How to scroll to a specific targeted component when clicking on Navbar Link

cossiewonka
  • 1
  • 1