React-Router multiple RouteHandlers on same component

Question

I would like to have more than one RouteHandler per react component. Is this possible? How would I let my router know which RouteHandler each route is assigned to?

Something like this. (The following code does nothing - just to demonstrate what I want)

import React from 'react'
import { RouteHandler } from 'react-router'
import { _, div } from 'factories'

export default
class dummy extends React.Component {

    constructor() {

        super();

        this.state = {}
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    }

    render() {

        return (
            div({},
                _(RouteHandler)({route: 'players'}), // if the url is players, this handler is used
                _(RouteHandler)({route: 'add'}) // if the url is add, this handler is used
            )
        )
    }
}
dummy.contextTypes = {
    router: React.PropTypes.func
};

Answer 1

If you looks at the Router sidebar example, it shows what you're trying to do.

I'll replicate the important parts here, but mostly pay attention to the handling of children (ie children.sidebar) and the route definition: <Route path="category/:category" components={{content: Category, sidebar: CategorySidebar}}>

import React from 'react';
import { Router, Route, Link } from 'react-router';
import data from './data';

var Category = React.createClass({
  render() {
    var category = data.lookupCategory(this.props.params.category);
    return (
      <div>
        <h1>{category.name}</h1>
        {this.props.children || (
          <p>{category.description}</p>
        )}
      </div>
    );
  }
});

var CategorySidebar = React.createClass({
  render() {
    var category = data.lookupCategory(this.props.params.category);
    return (
      <div>
        <Link to="/">◀︎ Back</Link>
        <h2>{category.name} Items</h2>
        <ul>
          {category.items.map((item, index) => (
            <li key={index}>
              <Link to={`/category/${category.name}/${item.name}`}>{item.name}</Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }
});

var Item = React.createClass({
  render() {
    var { category, item } = this.props.params;
    var menuItem = data.lookupItem(category, item);
    return (
      <div>
        <h1>{menuItem.name}</h1>
        <p>${menuItem.price}</p>
      </div>
    );
  }
});

var Index = React.createClass({
  render() {
    return (
      <div>
        <h1>Sidebar</h1>
        <p>
          Routes can have multiple components, so that all portions of your UI
          can participate in the routing.
        </p>
      </div>
    );
  }
});

var IndexSidebar = React.createClass({
  render() {
    return (
      <div>
        <h2>Categories</h2>
        <ul>
          {data.getAll().map((category, index) => (
            <li key={index}>
              <Link to={`/category/${category.name}`}>{category.name}</Link>
            </li>
          ))}
        </ul>
      </div>
    );
  }
});

var App = React.createClass({
  render() {
    var { children } = this.props;

    return (
      <div>
        <div className="Sidebar">
          {children ? children.sidebar : <IndexSidebar />}
        </div>
        <div className="Content">
          {children ? children.content : <Index />}
        </div>
      </div>
    );
  }
});

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="category/:category" components={{content: Category, sidebar: CategorySidebar}}>
        <Route path=":item" component={Item} />
      </Route>
    </Route>
  </Router>
), document.getElementById('example'));