Blog

Using Routie for React.js

addthis-react-flux-javascript-scaling

React is a great new Javascript framework for building fast, dynamic single-page websites. Paired with Flux, you can construct a single page application very quickly. But in a single page application, all of your content is available under a single, unchanging URL. That makes it harder to measure engagement per content, the user cannot easily return to an URL or share it without pointing to the homepage, and interpreting a user’s interaction can be murky if all the URLs are the same. Thus the need for routing within a React.js application.

Prerequisites

For this implementation, we wanted to respect the differences between props and state. Other routing implementations utilized state to hold data on views, which isn’t how React describes it’s usage.

Other important factors:

  • Easy to add new routes
  • Ability to easily retrieve values from the URL path, rather than having to rely on custom functions to extract and parse the window.location.href
  • Transitioning through hyperlinks or javascript

Routie

Routie is a super simple, light-weight (“800 bytes gzipped”), Javascript library for routing that is perfect for this use case. To set up, you pass the routie function an Object mapping routes to functions. URL parameters can be prefixed with a colon and passed as args to the function.

Rendering requests initiated by Flux store updates should come from the parent class. Other routing alternatives would put every view into one single super view, which is not my current architecture. This solution also allowed us to keep the existing view architecture, and use a main rendering function to contain the routing logic.

In this example, HomePageView and BookView are both React components I want to display based on the user’s location in the application. BookStore is a Flux store that provides the values for the props on the BookView. This code is executed in my entry point:


routie({
    '': function() {
        // render the first page on a direct access
        React.renderComponent(
            HomePageView(),
            document.getElementById('main')
        );
    },
    '/books/:bookId': function(bookId) {
        // reset the values on the BookStore so the last
        // book doesn't render while the book data is retrieved
        BookStore.resetBookData();
        // render the book view in the main, loading the required props
        React.renderComponent(
            BookView({
                bookId: bookId,
                bookData: BookStore.getBookData()
            }),
            document.getElementById('main')
        );
    },
    '*': function() {
        // default go to landing page
        routie('');
    }
});

If I need to add more routes, I just update this configuration object. And I can retrieve values from the URL path, as demonstrated in the books route.

Intentional Routing

On my HomePageView, I may provide links to their most recent books viewed. Each link would be in the form of “./book/{id}”. If the user clicks on one of the links, I need them routed to the BookView, so I do this:


function clickBookLink (bookId) {
    routie('#/book/' + bookId);
}

Yes, it is that easy. Routie executes the function with that route, taking the user to the book view. So in conclusion, Routie makes routing super simple, quick to implement, and has minor impact on my existing application.