basic react-router-dom example

App.js

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

const Nav = () => (
  <ul>
    <li><Link to='/'>Home</Link></li>
    <li><Link to='/about'>About</Link></li>
    <li><Link to='/session'>Session</Link></li>
    <li><Link to='/secret'>Secret</Link></li>
  </ul>
)

const Welcome = () => (
  <div>
    <h1>Welcome</h1>
    <p>This is some text</p>
  </div>
)

const About = () => (
  <div>
    <h1>About</h1>
    <p>Sure, stuff</p>
  </div>
)

const Secret = () => (
  <div>
    <h1>This is a secret</h1>
    <p>Sorry, not everyone can see this</p>
  </div>
)

const Session = ({login}) => (
  <div>
    <button onClick={login}>Click me</button>
  </div>
)

class App extends Component {
  state = {login: false}
  login = () => {this.setState( {login: true} ) }

  render() {
    return (
      <Router>
        <div>
          <Nav/>
          { this.state.login && <p>Logged in</p>}
          <Switch>
            <Route path="/secret" component={Secret}/>
            <Route path="/about" component={About}/>
            <Route path="/session" component={() => <Session login={this.login}/> } />
            <Route component={Welcome}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;