reactjsscrollreact-router-domanchor-scrollreact-scroll

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


I am making a single scroller page using React and want to navigate to a specific section of the page. In HTML we use an href and anchor tag to achieve this interaction.

I found a React library called react-scroll but I do not know how to link each component in different folders from the a link in the NavBar component. My NavBar has multiple links for scrolling to a section/ component. Any help would really be appreciated!

  import React, { Component } from "react";
  import { Link, animateScroll as scroll } from "react-scroll";
  class Navbar extends Component {

    render() {
      return (
        <nav className="navbar navbar-expand-lg navbar-dark">
          <Link className="navbar-brand" to="/">
            CMD <span>Custom Movie Database</span>
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>
          <div className="collapse navbar-collapse" id="navbarNav">
            <ul className="navbar-nav">
              <li className="nav-item ">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Home
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Search
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Category
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Popular
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Trailer
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Article
                </Link>
              </li>
              <li className="nav-item">
                <Link
                  className="nav-link"
                  to="/"
                  spy={true}
                  smooth={true}
                  offset={-70}
                  duration={500}
                >
                  Contact
                </Link>
              </li>
            </ul>
          </div>
        </nav>
      );
    }
  }

  export default Navbar;

This is Home Component where all component is added

    class Home extends React.Component {
      render() {
        return (
          <React.Fragment>
            <Navbar />
            <Showcase />
            <FormWrapper />
            <CategoryList />
            <MovieGrid />
            <MovieTrailer />
            <ArticleGrid />
            <Footer />
          </React.Fragment>
        );
      }
    }

Solution

  • react-scroll is a great library - let me try and explain how I understand it.

    Wherever I need a Link that scrolls to a certain element, I import that link, define it, and render it:

    import React, { Component } from 'react'
    import Scroll from 'react-scroll'
    const ScrollLink = Scroll.ScrollLink
    
    class Navbar extends Component {
    
    render() {
      return (
        <nav>
          <ScrollLink 
            to="example-destination" 
            spy={true} 
            smooth={true} 
            duration={500} 
            className='some-class' 
            activeClass='some-active-class'
          >
            Link Text Goes Here
          </ScrollLink>       
        </nav>
      )
    }
    
    export default Navbar;
    

    In a separate file, we define the destination that the `Link` will scroll to. The `Element` import from react-scroll makes this pretty easy!

    import React, { Component } from 'react'
    import { Element } from 'react-scroll'
    
    export default function () {
      return (
        <React.Fragment>
        
          <Element id='example-destination' name='example-destination'>
            // wrap your content in the Element from react-scroll
          </Element>
    
        </React.Fragment>
      )
    }
    

    Making sense? Let me know if I can expand on this further!