Getting react-router up and running with reapp.io

app.js

import './theme';
import 'reapp-ui';
import 'reapp-ui/lib/desktopTouch'; // demo
import { router, route } from 'reapp-kit';

router(require,
  route('app', '/',
    route('splashScreen', '/'),
    route('home', '/home',
      route('shop', '/home/shop',
        route('category', '/home/shop/category')
      ),
      route('profile', '/home/profile')
    )
  )
);

App.jsx

import '../theme';
import { React, Reapp, View } from 'reapp-kit';

export default Reapp(React.createClass({
  styles: {
    height: '100%'
  },

  render() {
    return (
      <div styles={this.styles}>
        {this.props.child()}
      </div>
    );
  }
}));

Category.jsx

import { Button, Card, Grid, React, Reapp, View } from 'reapp-kit';

export default React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },

  render() {
    return (
      <View {...this.props}
        title={[
          <Button chromeless onTap={() => this.context.router.transitionTo('shop')}>Back</Button>,
          "Fancy Shop"]}>
        {[1, 1, 1, 1, 1, 1, 1, 1, 1].map(function(product, i) {
          return (
            <Grid.Container>
              <Grid.Block><Card>Product</Card></Grid.Block>
              <Grid.Block><Card>Product</Card></Grid.Block>
            </Grid.Container>
          );
        }, this)}
      </View>
    );
  }
});

Home.jsx

import { Bar, React, Reapp, TitleBar, View, store } from 'reapp-kit';

export default Reapp(React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },

  getActiveBar() {
    let currentPath = this.context.router.getCurrentPath();
    if (currentPath.indexOf(this.context.router.makePath('shop')) === 0) {
      return 0;
    }
    if (currentPath.indexOf(this.context.router.makePath('profile')) === 0) {
      return 1;
    }
  },

  render() {
    return (
      <View
        after={
          <Bar display='text' position='bottom' activeIndex={this.getActiveBar()}>
            <Bar.Item onTap={this.context.router.transitionTo('shop')}>Shop</Bar.Item>
            <Bar.Item onTap={this.context.router.transitionTo('profile')}>Shop</Bar.Item>
          </Bar>}
        >
        {this.props.child()}
      </View>
    );
  }
}));

Shop.jsx

import { Button, Card, Grid, React, Reapp, View, NestedViewList, store } from 'reapp-kit';

export default Reapp(React.createClass({

  contextTypes: {
    router: React.PropTypes.func
  },

  handleTap() {
    this.context.router.transitionTo('product');
  },

  render() {
    return (
      <NestedViewList {...this.props.viewListProps}>
        <View title="Fancy Shop">
          <Button onTap={this.context.router.transitionTo('category')}>Category1</Button>
          <Button onTap={this.context.router.transitionTo('category')}>Category2</Button>
        </View>
        {this.props.child()}
      </NestedViewList>
    );
  }
}));

1. The app route (https://gist.github.com/mbrochh/91206a3000a18182b0e7#file-app-js-L7) simply is a wrapper for all other routes.

2. It's component (https://gist.github.com/mbrochh/91206a3000a18182b0e7#file-app-jsx-L4) doesn't do much other than loading the theme and rendering any nested route inside.

3. The home should never be called (https://gist.github.com/mbrochh/91206a3000a18182b0e7#file-app-js-L9). It's component (https://gist.github.com/mbrochh/91206a3000a18182b0e7#file-home-jsx-L27) renders a bar at the bottom with two items: Shop and Profile. So we really want to render the Shop or Profile component inside the Home view. Once again, {this.props.child()} takes care of that. (https://gist.github.com/mbrochh/91206a3000a18182b0e7#file-home-jsx-L34)

4. The shop view will actually be called. It's component is a NestedListView (https://gist.github.com/mbrochh/91206a3000a18182b0e7#file-shop-jsx-L17). The first view in this ViewList is the actual shop frontpage, you can click at a category, and it will "go into that category" (with that nice animation of a page sliding in from the right). That's why we have {this.props.child()} again here, it is supposed to render the next view in the View List.

5. The final view is the Category view (https://gist.github.com/mbrochh/91206a3000a18182b0e7#file-category-jsx-L10) which displays the actual products for that category. It has a back button to go back to the category selection.

IMPORTANT NOTE: In order for {this.props.child()} to work, you need to wrap your component in the Reapp function. You also need to add:

contextTypes: {
    router: React.PropTypes.func
  },

to your component class.

NOTE: I stripped away some stuff, so this is just example code, might not actually run if you just copy and paste. Also make sure that your components are in the correct folder structure (the error messages will tell you if a component cannot be found)