使用MobX Provider连接React Router时出现React.createElement错误求助

• 你的Provider导入方式错误：mobx-react中的Provider是命名导出，并非默认导出。你直接使用import Provider from 'mobx-react'会导致Provider的值为undefined（或是mobx-react的默认导出对象，但不是我们需要的Provider组件），React无法将其识别为有效的组件类型，因此抛出了这个警告。
• 还有一个潜在问题：你把RootStore类本身赋值给了store变量，如果RootStore是一个类的话，应该传入它的实例而非类本身，否则后续组件通过inject获取store时会无法正常使用。

1. 修正Provider的导入语句
   将原来的导入代码：

   import Provider from 'mobx-react'
   

   修改为解构导入：

   import { Provider } from 'mobx-react'
   

2. 确保RootStore是实例化后的对象
   如果你的RootStore是类定义的（比如下面这种形式）：

   class RootStore {
     // 这里是store的属性和方法
   }
   

   那么需要先实例化它再传入Provider：

   const store = new RootStore()
   

3. 修正后的完整index.js代码

   import React from 'react'
   import { render } from 'react-dom'
   import { Router, hashHistory, Route, IndexRedirect } from 'react-router'
   import App from './webapp/App'
   import Home from './components/pages/Home'
   import Dogs from './components/pages/Dogs'
   import Cats from './components/pages/Cats'
   import { Provider } from 'mobx-react' // 修正解构导入
   import RootStore from './webapp/stores'
   
   const store = new RootStore() // 实例化RootStore
   render((
     <Provider rootStore={store}>
       <Router history={hashHistory}>
         <Route path="/" component={App}>
           <IndexRedirect to="/home" />
           <Route path="/home" component={Home}/>
           <Route path="/dogs" component={Dogs}/>
           <Route path="/cats" component={Cats}/>
         </Route>
       </Router>
     </Provider>
   ), document.getElementById('app'))
   

完成以上修改后，Provider就能被正确识别为React组件，警告会消失，同时你的store实例也能被所有子组件通过inject正常访问了。

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