pinterestExtended.js

import React from 'react';
import { Router, Link, useRoutes } from 'react-router';
import createHashHistory from 'history/lib/createHashHistory';

var pictures = [
  { id: 0, src: 'http://placekitten.com/601/601' },
  { id: 1, src: 'http://placekitten.com/610/610' },
  { id: 2, src: 'http://placekitten.com/620/620' }
];

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>Pinterest Style Routes</h1>
        <p>
          The url `/pictures/:id` can potentially match two routes,
          it all depends on if the url was navigated to from the feed or
          not.
        </p>
        <p>
          Click on an item in the feed, and see that it opens in an overlay.
          Then copy/paste it into a different browser window (Like Chrome -> Firefox),
          and see that the image does not render inside the overlay. One URL, two
          session dependent routes and UI :D
        </p>

        {this.props.children}
      </div>
    );
  }
});

var Feed = React.createClass({
  overlayStyles: {
    position: 'fixed',
    top: 30,
    right: 30,
    bottom: 30,
    left: 30,
    padding: 20,
    boxShadow: '0px 0px 50px 30px rgba(0, 0, 0, 0.5)',
    overflow: 'auto',
    background: '#fff'
  },

  render() {
    return (
      <div>
        <div>
          {pictures.map(picture => (
            <Link key={picture.id} to={`/pictures/${picture.id}`} state={{ fromPath: '/' }}>
              <img style={{ margin: 10 }} src={picture.src} height="100" />
            </Link>
          ))}
          { <Link to={`/feed-two`}> Feed two </Link> }
        </div>
        {this.props.children && (
          <div style={this.overlayStyles}>
            {this.props.children}
          </div>
        )}
      </div>
    );
  }
});

var FeedTwo = React.createClass({
  overlayStyles: {
    position: 'fixed',
    top: 30,
    right: 30,
    bottom: 30,
    left: 30,
    padding: 20,
    boxShadow: '0px 0px 50px 30px rgba(0, 0, 0, 0.5)',
    overflow: 'auto',
    background: '#fff'
  },

  render() {
    return (
      <div style={{ background: '#ff0000' }}>
        <div>
          {pictures.map(picture => (
            <Link key={picture.id} to={`/pictures/${picture.id}`} state={{ fromPath: '/feed-two' }}>
              <img style={{ margin: 10 }} src={picture.src} height="100" />
            </Link>
          ))}
        </div>
        {this.props.children && (
          <div style={this.overlayStyles}>
            {this.props.children}
          </div>
        )}
      </div>
    );
  }
});

var FeedPicture = React.createClass({
  // NOTE: Replace <Link to="/" /> with the current fromPath
  // in the router state.
  render() {
    return (
      <div>
        <h2>Inside the feed</h2>
        <Link to="/">back</Link>
        <p>
          <img src={pictures[this.props.params.id].src} height="400" />
        </p>
      </div>
    );
  }
});

var Picture = React.createClass({
  render() {
    return (
      <div>
        <h2>Not Inside the feed</h2>
        <Link to="/">Feed</Link>
        <p>
          <img src={pictures[this.props.params.id].src} />
        </p>
      </div>
    );
  }
});

var FeedPictureRoute = {
  path: '/pictures/:id',
  component: FeedPicture
};

var FeedRoute = {
  path: '/',
  component: Feed
};

var FeedTwoRoute = {
  path: '/feed-two',
  component: FeedTwo
};

var PictureRoute = {
  path: '/pictures/:id',
  component: Picture
};

var RootRoute = {
  path: '/',
  component: App,
  indexRoute: FeedRoute,

  getChildRoutes (location, callback) {
    const { state } = location;
    if (state && state.fromPath) {

      // Proof of concept, this should be replaced by some kind of path matching
      // depending on the fromPath that is set in state.
      const fromPath = state.fromPath;
      if (fromPath === '/') {
        callback(null, [ injectModal(FeedRoute) ])
      } else if (fromPath === '/feed-two') {
        callback(null, [ injectModal(FeedTwoRoute) ])
      }
    } else {
      return callback(null, [ FeedTwoRoute, PictureRoute ]);
    }
  }
};

function injectModal (route) {
  if (route && !route.childRoutes) {
    route.childRoutes = [ FeedPictureRoute ];
    return route;
  }
  return route;
}

React.render(
  <Router children={RootRoute} />,
  document.getElementById('example')
);