How to use the react-router-dom.NavLink function in react-router-dom

value: function render() {
      return _react.default.createElement("div", {
        className: "navigation-links"
      }, _react.default.createElement(_reactRouterDom.NavLink, {
        className: "nav-bar-link link--nav",
        activeClassName: "link--nav-active",
        to: "/",
        exact: true
      }, "Publish"), _react.default.createElement(_reactRouterDom.NavLink, {
        className: "nav-bar-link link--nav",
        activeClassName: "link--nav-active",
        to: "/about"
      }, "About"), this.props.channelName ? _react.default.createElement(_NavBarChannelOptionsDropdown.default, {
        channelName: this.props.channelName,
        handleSelection: this.handleSelection,
        defaultSelection: this.props.channelName,
        VIEW: VIEW,
        LOGOUT: LOGOUT
      }) : _react.default.createElement(_reactRouterDom.NavLink, {
        id: "nav-bar-login-link",

var SidebarItem = function SidebarItem(_ref) {
  var link = _ref.link,
      style = _ref.style,
      activeStyle = _ref.activeStyle,
      exact = _ref.exact,
      children = _ref.children;
  return _react2.default.createElement(
    _reactRouterDom.NavLink,
    {
      to: link,
      style: _extends({}, styles.link, style),
      activeStyle: _extends({}, styles.activeLink, activeStyle),
      exact: exact
    },
    _react2.default.createElement(
      _List.ListItem,
      { style: styles.listItem },
      children
    )
  );
};

import * as React from 'react';
import {observer, inject} from 'mobx-react';
import LoadingSpinner from '../LoadingSpinner';
import {withRouter, location, history} from 'react-router-dom';
import {FETCH_PLAYLIST, FETCH_QUERY} from '../../constants/fetchTypes';
const styles = require('./header.scss');
import {Motion, spring, presets} from 'react-motion';
const NavLink = require('react-router-dom').NavLink;
import {UserStore, User, UserModel} from '../../store/UserStore';
import {SessionStore} from '../../store/SessionStore';
import {
  SESSION_STORE,
  USER_STORE,
  TRACK_STORE,
  PERFORMANCE_STORE
} from '../../constants/storeTypes';
import SearchPanel from '../SearchPanel';
import {TrackStore} from '../../store/TrackStore';

import {PerformanceStore} from '../../store/PerformanceStore';
interface IHeaderProp {
  sessionStore: SessionStore;
  userStore: UserStore;
  trackStore: TrackStore;

rest = _objectWithoutProperties(_props, ['children', 'active', 'hideOnRedirect', 'text', 'href', 'screen', 'settings']);

            var subItemClasses = (0, _classnames2.default)({ active: active });

            var content = _react2.default.createElement(
                'div',
                _extends({}, rest, { className: 'menu-sub-item' }),
                text ? _react2.default.createElement(
                    'span',
                    null,
                    text
                ) : children
            );

            return href ? _react2.default.createElement(
                _reactRouterDom.NavLink,
                { exact: true, to: href, activeClassName: 'active', className: subItemClasses, onClick: this.shouldHide },
                content
            ) : _react2.default.createElement(
                'div',
                { className: subItemClasses },
                content
            );
        }
    }]);

jest.fn()),
        location: {
          pathname: '/',
        },
      },
      ...props,
    }}
    />
  )
)));
ReactRouterDom.NavLink = ReactRouterDom.Link;


ReactRedux.connect = jest.fn((mapStateToProps, mapDispatchToProps = {}) => ((Component) => {
  function MockConnect(props) {
    return (
       ({
          ...acc,
          [key]: jest.fn(),
        }), {})
        ),
        ...(typeof mapStateToProps === 'function'
          ? mapStateToProps(defaultState, props)
          : {}
        ),
        ...props,

}((function () { 'use strict';

  var _nornj = require("nornj");

  var _reactRouterDom = require("react-router-dom");

  (0, _nornj.registerComponent)({
    BrowserRouter: _reactRouterDom.BrowserRouter,
    HashRouter: _reactRouterDom.HashRouter,
    'router-Link': _reactRouterDom.Link,
    MemoryRouter: _reactRouterDom.MemoryRouter,
    'router-NavLink': _reactRouterDom.NavLink,
    'router-Prompt': _reactRouterDom.Prompt,
    Redirect: _reactRouterDom.Redirect,
    Route: _reactRouterDom.Route,
    Router: _reactRouterDom.Router,
    StaticRouter: _reactRouterDom.StaticRouter,
    'router-Switch': _reactRouterDom.Switch
  });

})));

var buttonClasses = (0, _classnames2.default)({
                'menu-button': true,
                focus: focused
            });

            var itemClasses = (0, _classnames2.default)({
                'menu-item': true,
                active: subItemsVisible || active
            });

            return _react2.default.createElement(
                'div',
                null,
                href ? _react2.default.createElement(
                    _reactRouterDom.NavLink,
                    { exact: true, to: href, activeClassName: 'active', onClick: this.shouldHide },
                    _react2.default.createElement(
                        'div',
                        _extends({}, rest, { className: itemClasses }),
                        _react2.default.createElement(
                            'div',
                            { className: buttonClasses },
                            _react2.default.createElement(
                                'span',
                                null,
                                text
                            )
                        )
                    )
                ) : _react2.default.createElement(
                    'div',

function NavHashLink(props) {
  return genericHashLink(props, _reactRouterDom.NavLink);
}

var React = require('react');
var NavLink = require('react-router-dom').NavLink;


const Nav = () => {
  return (
    <ul>
      <li>
        
          Home
        
      </li>
      <li>
        
          Battle
        
      </li>
      <li></li></ul>