Skip to content

Instantly share code, notes, and snippets.

@s-petersson
Created September 3, 2015 23:46
Show Gist options
  • Save s-petersson/898a917070d8c740a7e6 to your computer and use it in GitHub Desktop.
Save s-petersson/898a917070d8c740a7e6 to your computer and use it in GitHub Desktop.
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')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment