import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
import loadable, { loadComponents } from 'loadable-components'

const Home = loadable(() => import('./Home'))
const About = loadable(() => import('./About'))
const Topics = loadable(() => import('./Topics'))

const App = () =>
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </BrowserRouter>

loadComponents().then(() => {
  ReactDOM.render(<App />, document.getElementById('main'))
})