reactjs - React Router v4 Navigate from MobX store action? -

i trying have react router v4 navigate action in store without explicitly passing history prop each store action needs navigate after logic runs.

i looking work:

import { navigationstore } 'navigation-store';  class contactstore {   @action contactform(name, message){     // logic runs here      // navigate or success      // go     navigationstore.goback();      // or navigate route     navigationstore.push('/success');    } } 

of course navigationstore doesn't exist (i wouldn't know put in react router make work), looking import mobx navigation store can use navigate , anywhere in app (component or store) same api react-router

how it?

update:

rr4 doesn't give way navigate store's action. trying navigate just above using rr4. need know navigation-store should contain can:

1. import { navigationstore } 'navigation-store'; anywhere (component/store), history aware, able navigate anywhere.
2. navigationstore.rr4method(rr4methodparam?); rr4method available rr4 navigation options push, goback, etc.. (this how navigation should happen)

update 2:

so url updates navigationstore.push('/success'); no webpage refresh happens.

here navigation-store.js

import { observable, action } 'mobx' import autobind 'autobind-decorator' import createbrowserhistory '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; 

here app.js

import react 'react' import { provider } 'mobx-react' import { browserrouter router, route } 'react-router-dom' import contact 'screens/contact' import success '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>     );   } } 

once url changes /success, nothing happens webpage instead of loading matching component success in case. still stuck here..

update 3 (solution):

this helped putting here reference others frustrating me.

in app.js had change:

import { browserrouter router, route } 'react-router-dom' <router> 

to

import { route } 'react-router-dom' import { router } 'react-router' import navigationstore 'stores/navigation-store' <router history={navigationstore.history}> 

i hope helps others :)

you can use store constructor argument store. you'll able use navigationstore instance correctly.

so initialize stores can have:

const navigationstore = new navigationstore();  const contactstore = new contactstore(navigationstore) const stores = {     navigationstore,      contactstore } 

and contact store becomes:

class contactstore {   _navigationstore;    constructor(navigationstore) {     this._navigationstore = navigationstore;   }   @action contactform(name, message){     // logic runs here      // navigate or success      // go     this._navigationstore.goback();      // or navigate route     this._navigationstore.push('/success');    } } 

---

edit

you can use singleton in order export instance of store, , use importing in module. have this:

navigationstore.js

class navigationstore() {     goback() {...};      push(target) {...}; } const navigationstore = new navigationstore(); // trick here export instance of class, not class // so, other modules use same instance.   export default navigationstore; 

contactstore.js

import navigationstore 'navigation-store'; // import naviationstore instance here  class contactstore {   @action contactform(name, message){     // logic runs here      // navigate or success      // go     navigationstore.goback();      // or navigate route     navigationstore.push('/success');    } } 

app.js: initialize stores mobx provider:

import navigationstore './navigationstore';  // import same instance here, still have in provider. // not necessary if don't want inject it.   const stores = {     navigationstore,      contactstore: new contactstore(); }