React-Router 和 MobX - 提供者答案

【问题标题】：React-Router & MobX - ProviderReact-Router 和 MobX - 提供者
【发布时间】：2018-01-25 10:51:20
【问题描述】：

我正在尝试从我拥有的每个组件页面访问我的商店，因此我按照以下教程连接 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：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。

我为什么会这样？它应该工作不是吗？

感谢您的帮助！

【问题讨论】：

如果你将<Router> 包裹在<div> 中，这能解决问题吗？
我会试一试，但为什么会成功？

标签： reactjs react-router provider mobx-react

【解决方案1】：

如果是网络应用，应该使用react-router-dom。

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

我为你的代码写了一个解决方案，没有使用装饰器，所以它支持 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() 使其可用于所有组件。类本身不必是可观察的，但它的属性可以。

【讨论】：