sample.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router , Route, Link } from 'react-router-dom';
import SuperAgent from 'superagent';

class Home extends Component {
    render(){
        return (
                <div className="page-content">TEST
    </div>);
    }
}

class Leaderboards extends Component {
    render(){
        return (<main className="l-main pad pad1">
          <div>Leaderboards~-~</div>
            </main>);
    }
}

class Tournaments extends Component {
    render(){
        return (<main className="l-main pad pad1">
          <div>Tournaments~-~</div>
            </main>);
    }
}

class About extends Component {
    render(){
        return (<main className="l-main pad pad1">
          <div>about~-~</div>
            </main>);
    }
}



class Navigation extends Component{

  render(){ return(
    <Router>
    <span>
      <div className="c-header-icon has-dropdown list1">

        <Link to="/">Home</Link>
      </div>
      <div className="c-header-icon has-dropdown list1 l3">


        <Link to="/leaderboards">Leaderboards</Link>

      </div>
      <div className="c-header-icon has-dropdown list1">

          <Link to="/tournaments">Tournaments</Link>

      </div>
      <div className="c-header-icon has-dropdown list1">

        <Link to="/about">About</Link>

      </div>

            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/leaderboards" component={Leaderboards}/>
            <Route path="/tournaments" component={Tournaments}/>
          </span>
        </Router>


  );}
}

render(<Navigation />, document.getElementById('navigations-template'))