import React, { Component } from 'react'
import { NavLink, Switch, Route } from 'react-router-dom'
import './App.css'

const Navigation = () => (
  <nav>
    <ul>
      <li>
        <NavLink exact activeClassName="current" to="/">Home</NavLink>
      </li>
      <li>
        <NavLink exact activeClassName="current" to="/about">About</NavLink>
      </li>
      <li>
        <NavLink exact activeClassName="current" to="/contact">Contact</NavLink>
      </li>
    </ul>
  </nav>
)

const Home = () => (
  <div>
    <h1>Home</h1>
    <p>Home stuff</p>
  </div>
)

const About = () => (
  <div>
    <h1>About</h1>
    <p>About stuff</p>
  </div>
)

const Contact = () => (
  <div>
    <h1>Contact</h1>
    <p>Contact stuff</p>
  </div>
)

const Main = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/about" component={About} />
    <Route exact path="/contact" component={Contact} />
  </Switch>
)

const App = () => (
  <div>
    <h1>Router</h1>
    <Navigation />
    <Main />
  </div>
)

export default App

// index.js:

import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)