Question

React-router正在渲染我的组件＆＃39; App＆＃39;。（这是react-router的1.0.0版本。）

我需要从内部＆＃39;应用程序中获取对路由器的引用。这可能吗？

我需要这样做的原因是因为＆＃39; App＆＃39;正在渲染Breadcrumbs - 这是react-breadcrumbs v.1.0.2的一个实例 - 而react-breadcrumbs期望路由器在this.content上。（看起来反应面包屑期待路由器做到这一点）。无论如何;我已经弄清楚如何从App设置上下文（使用childContextTypes和getChildContext），但是我无法看到如何在它呈现的组件中获得对路由器的引用。

Answer 1

您可以使用上下文（React的当前未记录的功能，但暂时可能保留的内容）：

module.exports = React.createClass({
  displayName: 'App',
  contextTypes: {
    router: React.propTypes.func
  },
  render: function() {
    var { router } = this.context;

    // Do things with the router. Ex: getting a parameter
    var userId = router.getCurrentParams().userId;
  }
});

Answer 2

您可以将Router.History mixin添加到您的应用程序，然后通过this.props.routes访问路由。

以下是一个例子：

var React = require("react");
var Router = require("react-router");
var Breadcrumb = require("react-breadcrumbs");

var App = React.createClass({
   mixins: [
      Router.History
   ],

   render: function () {
      "use strict";

      return (
      <div>
          <Breadcrumb routes={this.props.routes}></Breadcrumb>
          <div>
              {this.props.children}
          </div>
      </div>);
   }
});

module.exports = App;

React-router：如何获取渲染组件中路由器的引用？

2 个答案: