[ Reactjs ] Simple Navbar ( https://codesandbox.io/s/navbar-wemy7 )

App.js

import React from "react";
import { Route, NavLink, HashRouter } from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Contact from "./Contact";
import "./Main.css";

class App extends React.Component {
  render() {
    return (
      <HashRouter>
        <div>
          <h1>Simple Navbar</h1>
          <ul className="header">
            <li>
              <NavLink exact to="/">
                Home
              </NavLink>
            </li>
            <li>
              <NavLink to="/stuff">Stuff</NavLink>
            </li>
            <li>
              <NavLink to="/contact">Contact</NavLink>
            </li>
          </ul>
          <div className="content">
            <Route exact path="/" component={Home} />
            <Route path="/stuff" component={Stuff} />
            <Route path="/contact" component={Contact} />
          </div>
        </div>
      </HashRouter>
    );
  }
}

export default App;

Contact.js

import React from "react";

class Contact extends React.Component {
  render() {
    return (
      <div>
        <h2>Github</h2>
        <p>
          Visit my Github profile
          <a href="http://github.com/anmolsukki">Anmol Singh</a>.
        </p>
      </div>
    );
  }
}

export default Contact;

Home.js

import React from "react";

class Home extends React.Component {
  render() {
    return (
      <div>
        <h2>Hi,</h2>
        <p>This is a ReactJs simple Navbar Example</p>
        <p>For more detail about ReactJs visit my github page</p>
        <p>
          <a href="http://github.com/anmolsukki">github</a>
        </p>
      </div>
    );
  }
}

export default Home;

Main.css

body {
  background-color: #ffcc00;
  padding: 20px;
  margin: 0;
}
h1,
h2,
p,
ul,
li {
  font-family: sans-serif;
}
ul.header li {
  display: inline;
  list-style-type: none;
  margin: 0;
}
ul.header {
  background-color: #111;
  padding: 0;
}
ul.header li a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 20px;
  display: inline-block;
}
.content {
  background-color: #fff;
  padding: 20px;
}
.content h2 {
  padding: 0;
  margin: 0;
}
.content li {
  margin-bottom: 10px;
}
.active {
  background-color: #0099ff;
}

Stuff.js

import React from "react";

class Stuff extends React.Component {
  render() {
    return (
      <div>
        <h2>Navbar</h2>
        <p>This is a ReactJs simple Navbar</p>
        <p>It contains 3 - menu section</p>
        <ol>
          <li>Home</li>
          <li>Contact</li>
          <li>Stuff</li>
        </ol>
      </div>
    );
  }
}

export default Stuff;