React-Router＆MobX - Provider

Posted 2021-04-16

我试图从我的每个组件页面访问我的商店，所以我按照以下教程连接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：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。

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

谢谢你的帮助 ！

答案

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

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

我在不使用装饰器的情况下为您的代码编写了一个解决方案，因此它支持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()使其可用于所有组件。类本身不必是可观察的，但它的属性确实如此。