import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'

import { Route, Link, Redirect } from './Zero'

const paths = [ 'one', 'two', 'three' ]

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <h1>Zero Router</h1>
        </div>
        <ul>
          {paths.map(path => (
            <li><Link href={'/'+path}>{path}</Link></li>
          ))}
        </ul>
        <Route path="/">
          {(match) => match.exact ? (
            <Redirect to="/one"/>
          ) : null}
        </Route>
        {paths.map(path => (
          <Route path={'/'+path}>
            {(match) => match && (
              <h2>{path}</h2>
            )}
          </Route>
        ))}
      </div>
    );
  }
}

export default App