React-Router 和 MobX - 提供者

Question

我试图从我拥有的每个组件页面访问我的商店，所以我按照以下教程连接 React Router 和 MobX。

http://frontendinsights.com/connect-mobx-react-router/

但是，我在MobX 方式中遇到了一个问题——提供者组件。

这是代码示例：

import { Provider } from 'mobx-react';
import usersStore from './stores/usersStore';
import itemsStore from './stores/itemsStore';

const stores = { usersStore, itemsStore };

ReactDOM.render(
  <Provider {...stores}>
    <Router history={history}>
      <Route path="/" component={App}>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('app')
);

我试图在 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 = 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.createElement：类型不应为空、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

为什么我会得到那个？它应该工作不是吗？

谢谢你的帮助 ！

Answer 1

如果是Web应用程序，应该使用react-router-dom 。

这是使用https://github.com/mobxjs/mobx-react#observer注入 store 的正确方法Provider

我为您的代码编写了一个解决方案，没有使用装饰器，因此它支持 create-react-app：

import React, { Component } from 'react';
import { Provider, Observer } from 'mobx-react';
import { observable } from 'mobx';
import { BrowserRouter, Switch, Route, Link, Redirect } from 'react-router-dom';

const myStore = observable({
  home: 'Home',
  cat: 'Cat',
});

const Home = () => (
  <Observer 
    inject={stores => ({ myStore : stores.myStore })}
    render={props => (<section><h1>{props.myStore.home}</h1></section>)}
  />
);

const Cat = () => (
  <Observer 
    inject={stores => ({ myStore : stores.myStore })}
    render={props => (<section><h1>{props.myStore.cat}</h1></section>)}
  />
);

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Provider myStore={myStore}>
          <div className="App">
            <header className="App-header">
              <nav>
                <ul>
                  <li><Link to="/home">HOME</Link></li>
                  <li><Link to="/cat">CAT</Link></li>
                </ul>
              </nav>
            </header>
            <Switch>
              <Route path='/home' exact component={Home} />
              <Route path='/cat' exact component={Cat} />
              <Redirect from="/" to="/home" />
            </Switch>
          </div>
        </Provider>
      </BrowserRouter>
    );
  }
}

export default App;

所有组件都在 App.js 文件中。create-react-app 中的默认 index.js 没有变化。

注意：
执行此操作的另一种方法是简单地为存储创建一个单例类，并使用export default new Store()它来使其可供所有组件使用。类本身不必是可观察的，但它的属性却可以。