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} />

基于反应路由器中的slug的条件处理程序？

1 个答案: