React Router v4从MobX商店操作导航？

Question

我试图让路由器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是不存在的（我不知道它要放什么东西从路由器做出反应，使其工作），但我我正在寻找导入一个mobx导航商店，我可以用它来导航应用程序（组件或商店）中的任何地方使用相同的API react-router

如何做到这一点？

更新：

RR4没有给大家一个办法，从商店的行为进行导航。我正在尝试导航，就像上面使用RR4的一样。我只需要知道什么navigation-store应包含这样我就可以：

1. import { NavigationStore } from 'navigation-store';任何地方（分量/店），还历史认识，要能够从任何地方进行导航。
2. NavigationStore.RR4Method(RR4MethodParam?);其中RR4Method会是什么样子推，GoBack的，等可用RR4导航选项。（这是导航应该如何发生的）

更新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，什么都不会发生的网页，而不是在这种情况下，加载匹配组件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在为了导出s的实例撕掉，并因此通过将其导入到任何模块中来使用它。所以，你可以有这样的事情：

navigationStore.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; 

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