Navigation.js

import React from 'react'
import { NavLink as RRNavLink, Link } from 'react-router-dom'
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from 'reactstrap'

export default class Navigation extends React.Component {
  constructor (props) {
    super(props)

    this.toggle = this.toggle.bind(this)
    this.state = {
      isOpen: false
    }
  }
  toggle () {
    this.setState({
      isOpen: !this.state.isOpen
    })
  }
  render () {
    return (
      <div className='sticky-top'>
        <Navbar color='faded' inverse toggleable role='navigation' >
          <NavbarToggler type='button' right onClick={this.toggle} />
          <NavbarBrand tag={Link} to='/'>
            <img
              src='./_public/favicon.png'
              height='30'
              className='d-inline-block align-top'
              alt='brand'
            />
          </NavbarBrand>
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className='ml-auto' navbar>
              <NavItem>
                <NavLink activeClassName='active' tag={RRNavLink} exact to='/'>
                  ГОЛОВНА
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  activeClassName='active'
                  tag={RRNavLink}
                  to='/products'
                >
                  ПРОДУКЦІЯ
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  activeClassName='active'
                  tag={RRNavLink}
                  to='/services'
                >
                  ПОСЛУГИ
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink activeClassName='active' tag={RRNavLink} to='/price'>
                  ЦІНИ
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  activeClassName='active'
                  tag={RRNavLink}
                  to='/contacts'
                >
                  КОНТАКТИ
                </NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    )
  }
}

package.json

{
  .......
  ,
  "dependencies": {
    "axios": "^0.15.3",
    "babel-loader": "^6.2.7",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-register": "6.16.0",
    "express": "^4.14.0",
    "history": "^4.4.0",
    "lodash": "^4.16.2",
    "newrelic": "^2.2.0",
    "react": "^15.3.2",
    "react-addons-css-transition-group": "^15.4.2",
    "react-addons-transition-group": "^15.4.2",
    "react-dom": "^15.3.2",
    "react-ga": "^2.2.0",
    "react-google-maps": "^4.11.0",
    "react-redux": "^5.0.3",
    "react-router": "next",
    "react-router-dom": "next",
    "reactstrap": "^4.1.1",
    "redux": "^3.3.1",
    "redux-thunk": "^2.1.0",
    "shortid": "^2.2.6"
  },
  "devDependencies": {
    "babel-core": "^6.16.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2017": "^6.16.0",
    "bootstrap": "^4.0.0-alpha.6",
    "css-loader": "^0.25.0",
    "eslint": "^3.6.1",
    "eslint-config-standard": "^7.0.0",
    "eslint-config-standard-jsx": "^3.1.0",
    "eslint-config-standard-react": "^4.1.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^6.3.0",
    "eslint-plugin-standard": "^2.0.0",
    "jsdom": "^9.5.0",
    "json-loader": "^0.5.4",
    "react-addons-test-utils": "^15.3.2",
    "react-test-renderer": "^15.3.2",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

Thank you so much for this lovely working example 🥇

Thanks, It's working :)