React Scroll - Using React Scroll to in NavBar to scroll to specific component

Question

I'm trying to use react scroll in my navbar to be able to scroll to a specific Component when any of the nav elements are clicked.

I've been trying to follow the code, but I can't seem to fully understand it. I found a good answer here How to scroll to a specific targeted component when clicking on Navbar Link

But I am getting a little confused by it. My own code below, I would love to keep it as a function and not change it to a class:

    import React, { useState } from "react";
import "../Css/NavBar.css";
import Openclose from "./Openclose";
import Scroll from "react-scroll";
import { Link } from "react-scroll";

export default function NavBar() {
  const [isOpen, setIsOpen] = useState(false);

  const renderItems = () => {
    if (!isOpen) {
      return null;
    }
    return (
      <nav className="sidebar">
        <Scroll.ScrollLink
          to="/aboutme"
          spy={true}
          smooth={true}
          duration={500}
        >
          <Link to="/aboutme">About Me </Link>
        </Scroll.ScrollLink> // I'm just playing around with trying to make one work first.
        <li className="sidebar-link">About Me</li>
        <li className="sidebar-link">Projects</li>
        <li className="sidebar-link">Blog Articles</li>
        <li className="sidebar-link">Download CV</li>
        <li className="sidebar-link">Contact Me</li>
      </nav>
    );
  };

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="sidebar-container">
      <br></br>
      <Openclose isOpen={isOpen} handleClick={toggleSidebar} />
      {renderItems()} <div className="sidebar-icon"></div>
    </div>
  );
}

Once I then go to MainWebsite Component where NavBar sits with other components. Go to the About Me component and wrap that in the Element tag as the answer i've copied in suggests. It doesn't work.

I simply get a warning error saying

index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
    in Unknown (at NavBar.js:16)
    in nav (at NavBar.js:15)
    in div (at NavBar.js:38)
    in NavBar (at MainWebsite.js:12)
    in div (at MainWebsite.js:11)
    in MainWebsite (at App.js:17)
    in div (at App.js:20)
    in div (at App.js:14)
    in App (at src/index.js:7)

Here is my About Me

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

export default function AboutMe() {
  return (
    <React.Fragment>
      <Element id="/aboutme" name="aboutme">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas leo
          tortor, elementum vel tempus vel, luctus at elit. Maecenas ac mattis
          urna. Praesent a elementum ipsum. Praesent laoreet molestie tincidunt.
          Donec ullamcorper, eros quis porta dapibus, tellus mi gravida est,
          sagittis posuere velit nulla vitae massa. Suspendisse consectetur,
          dolor sit amet scelerisque cursus, dolor neque sodales ex, vitae
          facilisis ante lectus non turpis. Duis mattis porttitor lectus.
          Aliquam ac pharetra justo. Fusce elementum velit sed mauris
          scelerisque pretium at sit amet odio.
        </p>
        
      </Element>
    </React.Fragment>
  );
}

So, am I just not writing something correctly in the NavBar component to to be able to scroll to other components once clicked?

Second time using this forum, so any advice as well on cutting back / creating a better question is also appreciated! I've spent a fair while trying to find answers etc myself but I'm getting lost.

Answer 1

Here's a basic usage:

import { Link } from "react-scroll";


// somewhere in your markup
<Link to="test1" spy={true} smooth={true} offset={50} duration={500}>Test</Link>

// somewhere else in your markup. This is where it will scroll to.
<div id="test1">...</div>

More details in the documentation: https://www.npmjs.com/package/react-scroll

Answer 2

Just to add on to the excellent answer by @pixelfreak. React-scroll has a problem when it comes to highlighting the link that is clicked, so you might also face this issue, where you click on a link, but it does not get highlighted and as soon as you scroll down a bit, it gets highlighted.

The issue can be found here https://github.com/fisshy/react-scroll/issues/29

To fix this, get rid of the smooth prop in the Link tag and put html, body{scroll-behavior:smooth} at the top of your style sheet.

Hope this helps people in the future.