import React, {Component} from 'react';
import {Link, Switch, Route} from 'react-router-dom';

class Header extends Component {
    render() {
        return (
            <div>
                <header>
                    <nav>
                        <ul>
                            <li><Link to="/">Home</Link></li>
                            <li><Link to="/forum">Forum</Link></li>
                            <li><Link to="/about">About</Link></li>
                        </ul>
                    </nav>
                </header>
            </div>
        )
    }
}

class Main extends Component {
    render() {
        return (
            <main>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route exact path="/forum" component={Forum}/>
                    <Route exact path="/about" component={About}/>
                </Switch>
            </main>
        )
    }
}

class Home extends Component {
    render() {
        return (
            <div>
                <h1>Home page</h1>
            </div>
        )
    }
}

class Forum extends Component {
    render() {
        return (
            <div>
                <h1>Forum page</h1>
            </div>
        )
    }
}

class About extends Component {
    render() {
        return (
            <div>
                <h1>About page</h1>
            </div>
        )
    }
}

class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                <Main/>
            </div>
        )
    }
}

export default App;