import React, { Component } from 'react';

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

class App extends Component {
  render() {
    return (
      <div  className="App">
        <Router>
          <div>
            <Link to="/">
              <button>Go to home</button>
            </Link>
            <Route exact path="/" component={() => <Home/>} />
            <Route exact path="/other" component={() => <Other/>} />
          </div>
        </Router>
      </div>
    );
  }
}

class Home extends Component {
  render() {
    return (
      <div className="home">
        <Router>
          <div>
            <Route exact path="/" component={() => <HomeController/>} />
            <Route exact path="/about" component={() => <About/>} />
          </div>
        </Router>
      </div>
    );
  }
}

class HomeController extends Component {
  render() {
    return (
      <div className="homecontroller">
        <Link to="/about">
          <button>Go to about</button>
        </Link>
      </div>
    );
  }
}

class About extends Component {
  render() {
    return (
      <div className="about">
        ABOUT
      </div>
    );
  }
}

class Other extends Component {
  render() {
    return (
      <div className="other">
        OTHER
      </div>
    );
  }
}

export default App;