. .

react-router in Twitter and Pinterest style

On the documentation website for react-router, there’s an example titles Modal Gallery (code given here). It was called the Pinterest style in previous versions: v2 and v3.

IMO, the versions 2.x and 3.x were more obvious and clear in their approach. It was tough alone to grasp the logic involved in the v4 approach - especially the use of multiple !foo and !!bar expressions. Trying to add the Twitter style in it melted my brain.

So I tried some other way, which works too.

tl;dr or show, dont’t tell

Here’s the repo, the main code and a working demo.

The demo logs the name of the React components in order of triggering of componentWillMountmethod.

The routing layouts

If you’ve ever used either of the websites, you may already about their individual routing solutions.

If not, I suggest a tour of the respective websites.

Pinterest

When the user clicks on an image link, the URL changes, but no navigation happens. Instead, the image is presented in a modal. Close the modal and we go back to the previous URL, but again, no actual navigation.

That’s the standard routine.

But when you open the link in a new tab or reload a page with the modal open, a new container element is loaded first and the image is loaded in it.

The common component can be accessed with $('.Closeup.Module') on either page;

Twitter

The standard routine is the same. Click on a tweet, the URL changes, modal opens on same page. Close the modal and we’re back to where we were, but again, no actual navigation.

But when you open the link in a new tab or reload a page with the modal open, a new container element is loaded first and the image is loaded in it.

But no tweets are loaded just yet - just the profile template.

This speeds the render process and prevent extra, possibly unnecessary load on the server.

The main content can be accessed with $('.PermalinkOverlay-modal')

The difference

The difference is in the purpose of the said container element.

Twitter serves the user a container that shows the poster’s (the one who posted the tweet) profile picture, background cover, theme etc. The modal blocks the empty tweet area “just right”, giving the feeling as though the entire page was loaded.

Pinterest loads a super-simple component that serves (as far as I can tell) just one purpose - load the data and image. Plus, since images are usually pretty big and there’s not much to render, this keeps things smooth.

The End

This neat little trick has worked for me so far. I’d like to know if someone has found some other way round. Especially in a much larger app with a ton of routes - that’d be great.

And in case you missed it, here’s the repo, the main code and a working demo.

The demo logs the name of the React components in order of triggering of componentWillMountmethod.