mhaagens / react-mobx-react-router4-boilerplate

React, React-Router 4, MobX and Webpack 2-boilerplate with async routes.
560 stars 137 forks source link

How to use RouterStore #41

Closed jaynakus closed 7 years ago

jaynakus commented 7 years ago

On some occasions I want to have an opportunity to push a route. Normally I would do it with injecting routing store. for example


@inject('routing') @observer
export default class Home extends Component {

  render() {
    let {routing} = this.props;
    return (
      <button onClick={()=>routing.push('/path/to/go')}>Push it</button>
    )
  }

But to have this work I have to configure it like this

import {Router} from "react-router-dom";
import createBrowserHistory from 'history/createBrowserHistory';
import {RouterStore, syncHistoryWithStore} from 'mobx-react-router';

const renderApp = () => {
  const browserHistory = createBrowserHistory();
  const routeStore = new RouterStore();
  const history = syncHistoryWithStore(browserHistory, routeStore);
  render(
    <AppContainer>
      <Provider store={store} routing={routeStore}>
        <Router history={history}>
          <App />
        </Router>
      </Provider>
    </AppContainer>,
    document.getElementById("root")
  );
};

I expect it work

 render() {
    let {routing} = this.props;
    return (
      <div >
        <Switch>
          <Route exact path="/" render={props => (
            <LazyRoute {...props} component={import("../pages/Home")}/>
          )}/>
         <Route exact path="/path/to/go" render={props => (
            <LazyRoute {...props} component={import("../pages/OtherPage")}/>
          )}/>
       </Switch>
     </div>
    )
}

Location change on address bar but OtherPage does not render until I do some thing like this:

 render() {
    let {routing} = this.props;
    return (
      <div >
        <span style={{display: 'none'}}>{routing.location.pathname}</span>
        <Switch>
          <Route exact path="/" render={props => (
            <LazyRoute {...props} component={import("../pages/Home")}/>
          )}/>
         <Route exact path="/path/to/go" render={props => (
            <LazyRoute {...props} component={import("../pages/OtherPage")}/>
          )}/>
       </Switch>
     </div>
    )
}

Am I doing something wrong? I feel I'm missing something

jaynakus commented 7 years ago

Oh, I found! The problem was with mobx version. Mine was >3 but you use 2.5. Is there any chance to upgrade version?

mhaagens commented 7 years ago

Dependencies upgraded in the latest commit!