reactjs - React Router v4 从 MobX 存储操作导航？

Question

我试图让 react 路由器 v4 从 store 中的操作导航没有明确传递 history在某些逻辑运行后需要导航的每个商店操作的 Prop 。

我正在寻找这样的工作:

import { NavigationStore } from 'navigation-store';

class ContactStore {
  @action contactForm(name, message){
    // Some logic runs here

    // Then navigate back or success

    // Go back
    NavigationStore.goBack();

    // Or Navigate to Route
    NavigationStore.push('/success'); 
  }
}

当然 NavigationStore不存在(我不知道要从 React Router 中放入什么以使其工作)，但我希望导入一个 mobx 导航商店，我可以使用它来导航到应用程序中的任何位置(组件或store) 使用与 react-router 相同的 api

怎么做？

更新:

RR4 没有为我们提供从商店操作中导航的方法。我正在尝试导航 就像上面 使用 RR4。我只需要知道navigation-store应该包含 to 所以我可以:

import { NavigationStore } from 'navigation-store';任何地方(组件/商店)，也可以感知历史，以便能够从任何地方导航。

NavigationStore.RR4Method(RR4MethodParam?);在哪里 RR4Method将是可用的 RR4 导航选项，例如 push、goBack 等。(这就是导航应该发生的方式)

更新 2:

所以 URL 现在从 NavigationStore.push('/success'); 更新。但没有网页刷新发生。

这里是 navigation-store.js

import { observable, action } from 'mobx'
import autobind from 'autobind-decorator'
import createBrowserHistory from 'history/createBrowserHistory'

class NavigationStore {
  @observable location = null;
  history = createBrowserHistory();

  @autobind push(location) {
    this.history.push(location);
  }
  @autobind replace(location) {
    this.history.replace(location);
  }
  @autobind go(n) {
    this.history.go(n);
  }
  @autobind goBack() {
    this.history.goBack();
  }
  @autobind goForward() {
    this.history.goForward();
  }
}

const navigationStore = new NavigationStore();

export default navigationStore;

这里是 app.js

import React from 'react'
import { Provider } from 'mobx-react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Contact from 'screens/Contact'
import Success from 'screens/Success'

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Provider>
          <Router>
            <div>
              <Route path='/contact' component={Contact} />
              <Route path='/success' component={Success} />
            </div>
          </Router>
        </Provider>
      </div>
    );
  }
}

一旦网址更改为 /success ，网页没有任何 react ，而是加载匹配的组件Success在这种情况下。还是卡在这里。。

更新 3(解决方案):

This helped我把它放在这里作为其他人的引用，因为这对我来说非常令人沮丧。

在 app.js我不得不改变:

import { BrowserRouter as Router, Route } from 'react-router-dom'
<Router>

到

import { Route } from 'react-router-dom'
import { Router } from 'react-router'
import navigationStore from 'stores/navigation-store'
<Router history={navigationStore.history}>

我希望这对其他人有帮助:)

Answer 1

您始终可以将商店用作另一个商店的构造函数参数。然后你就可以使用 NavigationStore实例正确。

因此，在您初始化商店的地方，您可以拥有:

const navigationStore = new NavigationStore(); 
const contactStore = new ContactStore(navigationStore)
const stores = {
    navigationStore, 
    contactStore
}

然后您的联系人存储变为:

class ContactStore {
  _navigationStore; 
  constructor(navigationStore) {
    this._navigationStore = navigationStore;
  }
  @action contactForm(name, message){
    // Some logic runs here

    // Then navigate back or success

    // Go back
    this._navigationStore.goBack();

    // Or Navigate to Route
    this._navigationStore.push('/success'); 
  }
}

编辑

您也可以use a singleton为了导出商店的实例，从而通过在任何模块中导入它来使用它。所以你可以有这样的东西:

导航商店.js

class NavigationStore() {
    goBack() {...}; 
    push(target) {...};
}
const navigationStore = new NavigationStore();
// The trick here is to export the instance of the class, not the class itself
// So, all other modules use the same instance.  
export default navigationStore;

联系商店.js

import navigationStore from 'navigation-store';
// We import the naviationStore instance here

class ContactStore {
  @action contactForm(name, message){
    // Some logic runs here

    // Then navigate back or success

    // Go back
    navigationStore.goBack();

    // Or Navigate to Route
    navigationStore.push('/success'); 
  }
}

App.js:为 mobx 提供者初始化存储的地方:

import navigationStore from './navigationStore'; 
// We import the same instance here, to still have it in the provider.
// Not necessary if you don't want to inject it. 

const stores = {
    navigationStore, 
    contactStore: new ContactStore();
}