React-Router 同一组件上的多个 RouteHandler

Question

我希望每个反应组件有多个 RouteHandler。这可能吗？如何让我的路由器知道每个路由分配给哪个 RouteHandler？

类似的东西。 （下面的代码什么都不做 - 只是为了演示我想要的）

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

如果您查看路由器 sidebar example，它会显示您正在尝试执行的操作。

这里把重要的部分复制一下，但主要是注意children的处理（即children.sidebar）和路由定义：<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'));