通过上下文将路由器传递给子组件答案

【问题标题】：Pass down router to child components via context通过上下文将路由器传递给子组件
【发布时间】：2015-08-19 11:53:20
【问题描述】：

我正在尝试通过上下文传递路由器，因此我可以在子 React.Component 上调用 navigateTo。

目的：
成功登录后，我需要离开登录。
策略：
1. 传递路由器到子登录组件。
2. 登录成功后在Router上调用navigateTo('/startpage') 传下来。

我在包含 Run 的页面/组件上有这个：

Router.run(routes, function (Handler) {
    React.render(<Handler/>, document.body);
});

以下上下文设置：

getChildContext() {
    return {
        router: Router
    };
}

这对于 childContextTypes：

childContextTypes = {
    router: React.PropTypes.object.isRequired
};

对于孩子本身：

contextTypes = {
    router: React.PropTypes.object.isRequired
};

如果我使用"router: React.PropTypes.string.isRequired"，上下文设置可以正常工作。注意字符串，但使用对象时我得到：

但是当我尝试使用对象时出现错误：

警告：上下文类型失败：提供给“NavItemLink”的“对象”类型的无效上下文“路由器”，应为“功能”。检查渲染方法

和：

未捕获的类型错误：this.context.router.isActive 不是函数

欢迎任何帮助？

【问题讨论】：

【解决方案1】：

对我有用的解决方案是在父级上创建一个函数并将其与上下文一起传递。

家长：

contextTypes = {
        router: React.PropTypes.func.isRequired
    };

在子组件上：

childContextTypes = {
        router: React.PropTypes.func.isRequired
    };

【讨论】：

【解决方案2】：

如果您只是传递router，那么请查看将您的组件包装在高阶组件withRouter 可用starting in v2.4 中。

react-router 存储库中的许多示例都使用它，这里是一个示例：

【讨论】：