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

Question

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.

Answer 1

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 (
    

      
        Link Text Goes Here
             
    
  )
}

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 (
    
    
      
        // wrap your content in the Element from react-scroll
      

    
  )
}

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