Support react-router v4 about mobx-react-router HOT 13 CLOSED

DONE

🎉 🎈 🏅 🍺 🎉 🎈 🏅 🍺 🎉 🎈 🏅 🍺 🎉 🎈 🏅 🍺 🎉 🎈 🏅 🍺 🎉 🎈 🏅 🍺 🎉 🎈 🏅 🍺

from mobx-react-router.

I am using a very simple hack to achieve routing.

import React, { Component } from 'react';
import { Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import { observable, computed } from 'mobx';


class RouterStore {
  constructor(props) {
    this.history = createHistory();
  }

  push(to) {
    this.history.push(to);
  }
}


class SyncedRouter extends Component {
  render() {
    return (
      <Router history={this.props.history} children={this.props.children} />
    )
  }
}

export { SyncedRouter };
export default new RouterStore();

then provide store to the mounted Dom by

ReactDOM.render(
  <Provider routing={routerStore}>
    <SyncedRouter history={routerStore.history}>
      <App />
    </SyncedRouter>
  </Provider>,
  document.getElementById('root')
);

later in the code, I can access the router history through injected routing property,

this.props.routing.push('/login')

from mobx-react-router.

@chuan137 Hey thanks, this looks good. I hadn't had a chance to get round to checking the new rr4 packages situation - I didn't realise react-router-dom was it's own package now.

Either way this is probably the right approach, some sync router component as you've done, then we can pretty much keep the API exactly the same.

Shouldn't be too much work, I'll try get something up and running in the next few days 👍

from mobx-react-router.

PR is up for v4 bindings - #14
🎉 🎈

from mobx-react-router.

@chuan137 I got error with your solution:
There is no reference of pathname in my code.

TypeError: Cannot read property 'pathname' of undefined

new Router
http://localhost:8080/index.js:56484:61
http://localhost:8080/index.js:40012:18
measureLifeCyclePerf
http://localhost:8080/index.js:39792:12
ReactCompositeComponentWrapper._constructComponentWithoutOwner
http://localhost:8080/index.js:40011:16
ReactCompositeComponentWrapper._constructComponent
http://localhost:8080/index.js:39997:21
ReactCompositeComponentWrapper.mountComponent
http://localhost:8080/index.js:39905:21
Object.mountComponent
http://localhost:8080/index.js:47061:35
ReactCompositeComponentWrapper.performInitialMount
http://localhost:8080/index.js:40088:34
ReactCompositeComponentWrapper.mountComponent
http://localhost:8080/index.js:39975:21
Object.mountComponent
http://localhost:8080/index.js:47061:35

import * as React from 'react'
import {Router} from 'react-router-dom'
import {History} from 'history'

export default class SyncedRouter extends React.Component<{
  history: History
}, void> {
  render () {
    return (
      <Router history={this.props.history} children={this.props.children}/>
    )
  }
}

import {createHistory, History} from 'history'
import {observable} from 'mobx'

class RouterStore {
  @observable history: History = null

  constructor () {
    this.history = createHistory()
  }
}

const routerStore = new RouterStore()

export default routerStore

const stores = {
  router: routerStore
}

export default class Root extends React.Component<void, void> {
  render () {
    return (
      <Provider store={stores}>
        <SyncedRouter history={stores.router.history}>
          <Switch>
            <Route path='/' component={App}/>
            <Route component={Page404}/>
          </Switch>
        </SyncedRouter>
      </Provider>
    )
  }
}

from mobx-react-router.

@abelkbil Make sure to follow the setup guide correctly, including correct package versions (react-router, mobx, etc...). If that doesn't work I think it is worth asking this on Stack Overflow. GitHub is supposed to just be for issue tracking and feature requests.

from mobx-react-router.

In short - hopefully soon. RR4 is still in beta, so the API may still change somewhat. Once it is properly released I'll be happy to create a v4 of this package, confident that I won't have to change it again 👍.

I'll leave this issue open though so it can be tracked by others.

from mobx-react-router.

v4 is out

from mobx-react-router.

I'll be looking to get a v4 version out at some point soon. No guarentees on what that will be though. Fairly busy at the moment.

Welcoming any suggestions/discussion here on how it should look. The React Router v4 API is very different from v3.

from mobx-react-router.

@chuan137 Nice work. Still trying to wrap my head around react-router. Could you share what's going on inside this guy:

import createHistory from 'history/createBrowserHistory';

from mobx-react-router.

@mattblackapps I havn't dive into it too much either. Simply speaking, History is a standalone library, which can be used to track the browsing location. It has intuitive navigation api, like push, go, goBack and etc. It is developed by the same developers as react-router, and also used there. Head to their page https://github.com/ReactTraining/history if you want more detail.

@alisd23 I feel the same way, that it should not be too much work. Version 4 is quite elegant organised.

from mobx-react-router.

@varHarrie , I am also in the same situation, could you please clear how to fix this.
Thanks in advance

from mobx-react-router.

I used alternative way:

import * as PropTypes from 'prop-types';

class SingleDashboardHeaderNav extends React.Component<Props, State> {

  static contextTypes = {
      router: PropTypes.object
  };

editDashboard() {
    this.context.router.history.push(`/dashboard/edit/${this.dashboardStore.currentDashboard.id}`);
  }

  createNewDashboard() {
    this.dashboardStore.createNewDashboard('')
    .then(response => {
      if ( response.status ) {
        this.context.router.history.push(`/dashboard/edit/${response.dashboard.id}`);
      }
    });
  }

I dont know is it the way to use.
May be useful for some one..

from mobx-react-router.