import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <NavLink to="/" exact activeStyle={{ color: 'red' }}>
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/about" activeStyle={{ color: 'red' }}>
              About
            </NavLink>
          </li>
          <li>
            <NavLink to="/users" activeStyle={{ color: 'red' }}>
              Users
            </NavLink>
          </li>
        </ul>

        <hr />

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users" component={Users} />
      </div>
    </Router>
  );
};

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Users = () => <h2>Users</h2>;

export default App;