Reactjs React路由器v4从MobX商店操作导航？

我试图让react router v4从

存储

中的一个操作导航，而不显式地将

历史

道具传递给在一些逻辑运行后需要导航的每个存储操作

我正在寻找这样的工作：

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导航存储，我可以使用与

React Router

相同的api在应用程序中的任何位置（组件或存储）导航

怎么做

更新：

RR4并没有给我们一种从商店的行为中导航的方法。我正在尝试使用RR4导航，就像上面的一样。我只需要知道

导航存储

应该包含哪些内容，以便我可以：

从“导航存储”导入{NavigationStore}

anywhere（组件/存储），也具有历史意识，能够从任何地方导航

NavigationStore.RR4Method（RR4MethodParam？）其中
RR4Method
将是可用的RR4导航选项，如推送、返回等。。（这就是导航的方式）

更新2:

因此url现在从

NavigationStore.push（'/success'）更新但未发生网页刷新

这里是
navigationstore.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;

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>
    );
  }
}

这里是app.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;

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>
    );
  }
}

到

从'react router dom'导入{Route}
从“react Router”导入{Router}
从“存储/导航存储”导入导航存储

我希望这对其他人有所帮助：）
您可以始终将一个存储用作另一个存储的构造函数参数。然后您将能够正确使用
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'); 
  }
}


编辑

您还可以导出存储实例，从而通过在任何模块中导入来使用它。所以你可以有这样的东西：

navigationStore.js

contactStore.js

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();
}

我基本上希望导入存储（如我所发布的）并使用它在不涉及构造函数的情况下导航存储（即历史感知）。我只是不知道该怎么做才能让RR4正常工作。是
react导航
的一个示例，但在RR4中寻找相同的示例。原因是我有一个带有
react navigation
的RN应用程序，它使用了我发布/链接的相同代码，我想在我的许多操作中重复使用相同的语法，这些操作是使用RR4 for web从组件/商店导航的。很抱歉，我不清楚你在问什么。你能不能给你的问题补充更多细节？根据平台的不同，您是否正在寻找使用React router 4或Navigation Store的方法？在构造函数中传递存储有什么问题？有点问题。也许您可以使用
历史记录
对象直接实现这一点？我通常使用mobx react router并将路由器存储作为构造函数参数传递给所有其他存储（或者在react组件中使用注入的路由器）。如果您更喜欢使用单实例模式，它也应该可以工作。几天前我查看了
mobx-react-router
，但没有看到我可以在哪里导入
导航存储
并导航。。我觉得通过导入和导航，从中央商店导航应该会容易得多！如果将此存储作为导出到文件中的单个实例，则可以。像导出const navigationStore=new navigationStore
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'); 
  }
}

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();
}