React Router v4

App.js

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

import Root from './Root';
import Sidebar from './Sidebar';
import SidebarItem from './SidebarItem';
import Main from './Main';
import Gist from './Gist';
// import logo from './logo.svg';
import './App.css';

class App extends Component {
  state = {
    gists: null
  }

  componentDidMount() {
    fetch('https://api.github.com/gists')
      .then(res => res.json())
      .then(gists => {
        this.setState({ gists })
      })
  }

  render() {
    const { gists } = this.state;

    return (
      <Router>
        <Root>
          <Sidebar>
            {gists ? (
              gists.map(gist => (
                <SidebarItem key={gist.id}>
                  <Link to={`/g/${gist.id}`}>
                    {gist.description || '[no description]'}
                  </Link>
                </SidebarItem>
              ))
              ) : (
                <div>Loading...</div>
              )}
          </Sidebar>
          <Main>
            <Route exact={true} path="/" render={() => (
              <h1>Welcome</h1>
            )}/>
            {gists && (
              <Route path="/g/:gistId" render={({ match }) => (
                <Gist gist={gists.find(g => g.id === match.params.gistId)} />
              )}/>
            )}
          </Main>
        </Root>
      </Router>
    );

    // return (
    //   <div className="App">
    //     <div className="App-header">
    //       <img src={logo} className="App-logo" alt="logo" />
    //       <h2>Welcome to React</h2>
    //     </div>
    //     <p className="App-intro">
    //       To get started, edit <code>src/App.js</code> and save to reload.
    //     </p>
    //   </div>
    // );
  }
}

export default App;

Gist.js

import React from 'react';

import LoadFile from './LoadFile';
// const Gist = ({ match }) => (
//   <div>
//     {match.params.gistId}
//   </div>
// );

const Gist = ({ gist }) => (
  <div>
    <h1>{gist.description || 'No Description'}</h1>
    <ul>
      {Object.keys(gist.files).map(key => (
        <li key={key}>
          <b>{key}</b>
          <LoadFile url={gist.files[key].raw_url}>
            {text => (
              <pre>{text}</pre>
            )}
          </LoadFile>
        </li>
      ))}
    </ul>
  </div>
);


export default Gist;

LoadFile.js

import React, { Component } from 'react';

class LoadFile extends Component {
  state = {
    file: null
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(res => res.text())
      .then(file => {
        this.setState({ file })
      })
  }

  render() {
    const { file } = this.state;

    return (
      file && this.props.children(file)
    );
  }
}

export default LoadFile;

Main.js

import React from 'react';

const Main = props => (
  <div style={{
    flex: 1,
    height: '100vh',
    overflow: 'auto'
  }}>
    <div style={{ padding: '20px' }} {...props}/>
  </div>
);

export default Main;

Root.js

import React from 'react';

const Root = props => (
  <div style={{
    display: 'flex'
  }} {...props}/>
);

export default Root;

Sidebar.js

import React from 'react';

const Sidebar = props => (
  <div style={{
    width: '33vw',
    height: '100vh',
    overflow: 'auto',
    background: '#eee'
  }} {...props}/>
);

export default Sidebar;

SidebarItem.js

import React from 'react';

const SidebarItem = props => (
  <div style={{
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    padding: '5px 10px',
  }} {...props}/>
);

export default SidebarItem;