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