How to use the react-scroll.DirectLink 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);

if (isDev) {

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"
    }, {

"use strict";

import React     from 'react';
import ReactDOM  from 'react-dom';
import 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() {
    return (

"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);
      this.scrollToTop = this.scrollToTop.bind(this);
  }