How to use the react-scroll.Link function in react-scroll

import React, { Component } from "react";
import PropTypes from "prop-types";
// import SyntaxHighlighter from "react-syntax-highlighter";
import SyntaxHighlighter from "react-syntax-highlighter";
const md5 = require("md5");
var Scroll = require("react-scroll");
var Link = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;

import { docco } from "react-syntax-highlighter/styles/hljs";
import { atomDark } from "react-syntax-highlighter/styles/prism";

var log = require("loglevel");
const _ = require("lodash");
import axios from "axios";
let isDev = require("isdev");

console.log("preview isDev:", isDev);

import * as d3 from 'd3';
import Sections from './Sections';

var ReactGA = require('react-ga');
var FontAwesome = require('react-fontawesome');
function logPageView() {
    ReactGA.set({
        page: window.location.pathname + window.location.search
    });
    ReactGA.pageview(window.location.pathname + window.location.search);
}
var React = require('react');
var Scroll = require('react-scroll');

// Scrolling variables
var Link = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;
var scroller = Scroll.scroller;

var durationFn = function (deltaTop) {
    return deltaTop;
};

// List of elements
const elementList = [
    {
        id: 'intro',
        name: "Introduction"

import React, { Component } from 'react';
// ES6 Imports
import Scroll from 'react-scroll'; // Imports all Mixins
import {scroller} from 'react-scroll'; //Imports scroller mixin, can use as scroller.scrollTo()


// Or Access Link,Element,etc as follows
let Link       = Scroll.Link;
let Element    = Scroll.Element;
let Events     = Scroll.Events;
let scroll     = Scroll.animateScroll;
let scrollSpy  = Scroll.scrollSpy;


import './../styles/Welcome.css';

class Welcome extends Component {


  render() {
    return (
      <div>
        <div id="page-content">
          <div></div></div></div>

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { Container, Grid, Header, Icon, List, Segment } from 'semantic-ui-react'
import Scroll from 'react-scroll'
import Head from '../components/Head'

const ScrollLink = Scroll.Link
const Element = Scroll.Element
const Events = Scroll.Events
const scroll = Scroll.animateScroll
const scrollSpy = Scroll.scrollSpy

export default class HowItWorks extends Component {
  constructor(props) {
    super(props)
    this.scrollToTop = this.scrollToTop.bind(this)
  }

  componentDidMount() {
    Events.scrollEvent.register('begin', function() {
      console.log('begin', arguments)
    })

"use strict";

var React     = require('react');
var ReactDOM  = require('react-dom');

import * as Scroll from 'react-scroll'

var Link       = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element    = Scroll.Element;
var Events     = Scroll.Events;
var scroll     = Scroll.animateScroll;
var scrollSpy  = Scroll.scrollSpy;

var durationFn = function(deltaTop) {
    return deltaTop;
};

class Section extends React.Component{

  constructor (props){
      super(props);
      this.scrollToTop = this.scrollToTop.bind(this);
  }

"use strict";

var React = require('react');
var ReactDOM = require('react-dom');
var Scroll = require('react-scroll');

var Link = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element = Scroll.Element;
var Events = Scroll.Events;
var scroll = Scroll.animateScroll;
var scrollSpy = Scroll.scrollSpy;

var durationFn = function (deltaTop) {
  return deltaTop;
};

class Section extends React.Component {

  constructor(props) {
    super(props);
  }
  render() {

"use strict";

var React     = require('react');
var ReactDOM  = require('react-dom');
var Scroll    = require('react-scroll');

var Link       = Scroll.Link;
var DirectLink = Scroll.DirectLink;
var Element    = Scroll.Element;
var Events     = Scroll.Events;
var scroll     = Scroll.animateScroll;
var scrollSpy  = Scroll.scrollSpy;

var durationFn = function(deltaTop) {
    return deltaTop;
};

class Section extends React.Component{

  constructor (props){
      super(props);
      this.scrollToTop = this.scrollToTop.bind(this);
  }

import React from "react";
import Scroll from "react-scroll";
import logo from "./logo.svg";
import i1 from "./images/i1.png";
import i2 from "./images/i2.png";
import i3 from "./images/i3.png";
import p1 from "./images/p1.png";
import p2 from "./images/p2.png";
import JindolDropdown from "./components/JindolDropdown";
import Articles from "./components/Articles";
import "./components/JindolDropdown.css";
import "./App.css";

const Link = Scroll.Link;
const Element = Scroll.Element;

class App extends React.Component {
  render() {
    return (
      <div>
        <div>
          <element name="test1">
            test 1
          </element>

          <element name="test2">
            test 2
          </element>

          <element name="test3"></element></div></div>

topCenter,
    bottomBottom,
    bottomTop,
    getDocumentRect,
    getDocumentElement,
    calculateScrollY } from 'react-track/lib/tracking-formulas';
import { rgb, rgba, scale, rotate,
px, percent, translate3d } from 'react-imation/tween-value-factories';

const easeOutBounce: any = new Easer().using('out-bounce');


import { SectionContainer } from '../SectionContainer/SectionContainer.tsx';
import { ImageContainer } from '../ImageContainer/ImageContainer.tsx';

const Link: any = Scroll.Link;
const Element: any = Scroll.Element;

interface IAppProps {
    dispatch?: (func: any) => void;
    isFetching?: boolean;
    lastUpdated?: number;
    editorial?: any;
    store?: any;
}

interface IAppState {
    editorial?: any;
    isFetching?: boolean;
    lastUpdated?: number;
}

import { StickyContainer } from "react-sticky";

import { ThemeProvider } from "@material-ui/styles";
import Grid from "@material-ui/core/Grid";
import { common } from "@material-ui/core/colors";

import MenuBar from "./components/menubar";
import Docs from "./components/docs";
import theme from "./components/megadrafttheme";
import Example from "./components/example";
import Header from "./components/header";
import { highlightCode } from "./components/highlightCode";
import LetsRockArrow from "./components/icons/arrow-down";
import ToggleButton from "./components/toggleButton";

const LinkScroll = Scroll.Link;
const scroller = Scroll.scroller;

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: true
    };
  }

  componentDidMount() {
    highlightCode(this);
  }

  componentDidUpdate() {
    highlightCode(this);