javascript - 基于 React Router 中的 slug 的条件处理程序？

Question

我是新手。我正在使用 React Route，我想知道是否可以根据传递给路由的 slug 执行不同的处理程序。

例如我有以下路线:

<Route name="page" path={'/:slug'} />

是否可以根据该 slug 动态设置要执行的处理程序？

我在他们的 API/示例中找不到任何内容。

提前致谢!

Answer 1

请记住，React/JSX 为您提供了 JavaScript 的全部功能。这意味着您的路由处理程序组件可以做任何它想做的事情——包括有条件地渲染子组件。像这样的东西可能会起作用(我没有运行过这个，所以把它当作伪代码):

^{注意:我使用的是 0.13 语法，因为这似乎是您正在使用的版本。}

var slugsToHandlers = {
  'about': AboutPage,
  'jobs': JobsPage,
};

var SlugRouteComponent = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },

  render: function() {
    var slug = this.context.router.getCurrentParams().slug;
    var Handler = slugsToHandlers[slug] || NotFundPage;
    return <Handler {...this.props} />;
  }
});

// ...

<Route name="page" path="/:slug" handler={SlugRouteComponent} />

如果需要，您也可以单独列出每条路线:

<Route name="aboutPage" path="/about" handler={AboutPage} />
<Route name="jobsPage" path="/jobs" handler={JobsPage} />
<Route name="page" path="/:slug" handler={NotFoundPage} />