Viewer

app.js

// #/0 shows pictures[0], #/1 shows pictures[1], etc.
var routes = (
    <Route name="picture" handler={Viewer} path=":index" />
);

Router.run(routes, function (Handler) {
    React.render(<Handler />, document.body)
})

viewer.js

var React = require('react'),
    Router = require('react-router');

var Route = Router.Route;

var Viewer = React.createClass({
    mixins: [ Router.Navigation, Router.State ],
    statics: {
        willTransitionTo: function (transition, params) {
            var index = parseInt(params.index, 10);
            if (index < 0 || index > ViewerStore.getAll().length - 1) {
                transition.abort();
            }
        }
    },
    getStateFromStore: function (index) {
        index = parseInt(index || this.getParams().index || 0);
        return {
            picture: ViewerStore.get(index),
            index: index
        };
    },
    keydown: function (event) {
        if (event.which === 74 || event.which === 37) {
            this.transitionTo('picture', {index: this.state.index - 1});
        }
        else if (event.which === 75 || event.which === 39) {
            this.transitionTo('picture', {index: this.state.index + 1});
        }
    },
    getInitialState: function () {
        return this.getStateFromStore();
    },
    componentDidMount: function () {
        window.addEventListener('keydown', this.keydown);
    },
    componentWillUnmount: function () {
        window.removeEventListener('keydown', this.keydown);
    },
    componentWillReceiveProps: function () {
        this.setState(this.getStateFromStore());
    },
    render: function () {
        var style = {};

        return (
            <div style={style}>
                <div>
                    <Link to="picture" params={{index: this.state.index - 1}}>previous</Link>
                    <span> - </span>
                    <Link to="picture" params={{index: this.state.index + 1}}>next</Link>
                </div>
                <div>
                    <img src={this.state.picture} />
                </div>
            </div>
        );
    }
});

ViewerStore.js

var pictures = [
    'http://placehold.it/240x20',
    'http://placehold.it/240x120',
    'http://placehold.it/240x220',
    'http://placehold.it/240x320',
    'http://placehold.it/240x420'
];

var Dispatcher = require('./dispatcher'),
    EventEmitter = require('events').EventEmitter,
    assign = require('object-assign');

var ViewerStore = assign({}, EventEmitter.prototype, {
    getAll: function () {
        return pictures;
    },
    get: function (index) {
        return pictures[index];
    }
});

ViewerStore.dispatchToken = Dispatcher.register(function (payload) {
    switch (payload.action.type) {
    }
});