React HOC结合Context引发React Router v4路由使用警告问题排查

这个警告的核心原因其实是你的<Route>组件被同时传入了component和children属性——哪怕你自己没显式写这两个属性，HOC的处理逻辑也悄悄给<Route>凑齐了这对“冲突组合”。

问题拆解 #

先看你的代码链路：

1. 你的withMainStore HOC会把MainConsumer提供的store所有属性，和组件接收的原props一起传递给myLayout。
2. 如果你的store里恰好存在一个名为component（小写c）的属性，那么myLayout的props里就会同时有：
   • 来自App.js的Component（大写C）、path，以及闭合标签带来的children（哪怕标签里是空内容，也会默认传children: null）
   • 来自store的component（小写c）属性
3. 当myLayout解构出const { Component, ...rest } = this.props后，rest里就包含了component、children这些属性，你把...rest直接传给<Route>，等于给<Route>同时塞了component和children——这就触发了React Router的冲突警告。

而移除withMainStore后，myLayout不会收到来自store的component属性，<Route>自然不会同时拿到冲突的两个属性，警告也就消失了。

解决方案 #

你可以从以下几个方向入手解决：

• 重命名store里的冲突属性：如果store中的component属性不是必须用这个名字，改成mainComponent这类不会和React Router内置属性冲突的名称，从根源避免问题。
• 显式过滤冲突属性：在myLayout的render方法里，主动把小写的component从要传给Route的props里剔除：

  render() {
    // 把来自store的component属性单独解构出来，不放入rest
    const { Component, component, ...rest } = this.props;
    return (
      <Route {...rest} render={(props) => (
        <Component {...rest} {...props} />
      )}/>
    )
  }
  

• 避免传递空children：如果App.js里<myLayout>的闭合标签里没有实际内容，改成自闭合标签<myLayout path="/foo" Component={someComponent} />，这样myLayout就不会收到children属性，也就不会传递给Route。

内容的提问来源于stack exchange，提问作者Patrick DaVader