import React from 'react'
import ReactDOM from 'react-dom'

import { BrowserRouter, Link, Route } from 'react-router-dom'

const Carnitas = () => (
  <div>
    <h1>Carnitas</h1>
  </div>
)
const Tacos = ({ match }) => // here's a nested div
(
  <div>
     <div>
          <Link to='/carnitas'>carnitas</Link>
        </div>

    {/* here's a nested Route,
        match.url helps us make a relative path */}
    <Route path={match.url + '/carnitas'} component={Carnitas} />
  </div>
)

const App = () => (
  <BrowserRouter>
    {/* here's a div */}
    <div>
      <nav>
        <div>
          <Link to='/tacos'>t</Link>
        </div>
        <Link to='/bacos'>b</Link>
        <div />
      </nav>
      {/* here's a Route */}
      <Route path='/tacos' component={Tacos} />
      <Route path='/bacos' component={Carnitas} />
    </div>
  </BrowserRouter>
)

// when the url matches `/tacos` this component renders

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