No use with react-router v4 about mobx-react-router HOT 12 CLOSED

For anyone having this issue, I ended up using @withRouter like so in my App.jsx and that seemed to do the trick.

import { Switch, Route, Link, withRouter } from 'react-router-dom';

@inject('store')
@withRouter
@observer
export default class App extends Component {
...
}

from mobx-react-router.

Let me know if there's still issues. New version 4.0.1 is now out.

from mobx-react-router.

I tried <Router history={routingStore.history}>...</Router>
instead of <Router history={history}>...</Router>
and it worked.

from mobx-react-router.

I have a similar issue w/ react-router v4, only I've been trying hashHistory and memoryHistory. Url successfully updates and the Router store gets updated, but the components never re-render. A page refresh then shows the correct component. If I remove the syncHistoryWithStore and pass the history directly to Router, everything works as expected.

from mobx-react-router.

Same problem here. As I can see, the original history from history v4.6.1 already has listen method, and it is overloaded during the syncronisation in the syncHistoryWithStore function.

from mobx-react-router.

I am having similar issue @mergebandit, have you managed to fix the issue?

from mobx-react-router.

Sorry been away this last week, will take a look soon - seems odd that this simple case would not work.

from mobx-react-router.

Ok I think the issue is fixed, it was an oversight on my part. Changed the listen function to subscribe, and also I am now mutating the original history object as opposed to returning enhanced history as a completely new reference - which was causing issues too. PR at #18.

from mobx-react-router.

I'm still having this issue running 4.0.1

I'm pulling my router out of props:

const { router, result } = this.props

calling push:

router.push(`/top-results/${result.id}`)

and here injecting the router store into the component:

inject('router')(observer(TopResult))

For reference, here's my store creation:

import { RouterStore } from 'mobx-react-router'
import appStores from 'store'

let stores = {
  router: new RouterStore(),
  ...appStores,
}

export default stores

And here's where I build my root component:

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'mobx-react'
import createBrowserHistory from 'history/createBrowserHistory'
import { syncHistoryWithStore } from 'mobx-react-router'
import { BrowserRouter as Router } from 'react-router-dom'

import './index.css'
import stores from './config/store'
import RouteConfig from './config/views'

const browserHistory = createBrowserHistory()
const history = syncHistoryWithStore(browserHistory, stores.router)

ReactDOM.render(
  /* Currently having to pass {...stores} as well, so I can just inject('specificStore')
   * instead of always inject('store') and then const { specificStore } = this.props.store
   */
  <Provider store={stores} {...stores}>
    <Router history={history}>
      <RouteConfig />
    </Router>
  </Provider>,
  document.getElementById('root')
)

If I just do the following, this works:

import { Link } from 'react-router-dom'
<Link to={`top-results/${result.id}`}>{result.name}</Link>

Finally, here's my mobx-devtools output:

from mobx-react-router.

Ah, I see the issue. You're using the BrowserRouter component at the top level and trying to pass history to it - but that prop doesn't exist. You need to use the more low-level Router component from react-router, as shown in the docs.

from mobx-react-router.

@alisd23 Hi I still encounter this issue, would you please help to check?
my-react-starter

  const browserHistory = createBrowserHistory()
  const routerStore = new RouterStore()
  const history = syncHistoryWithStore(browserHistory, routerStore)
  history.subscribe((location, action) => console.log(location.pathname));

both browserHistory and history do not get update when click Link to change the path

from mobx-react-router.

Hi @njleonzhang I can't see the code you wrote above in the project you linked me. Just make sure you've followed the documentation and exhausted all options. If it still doesn't work and you're sure it's a bug with this project (which hasn't been addressed already - like this issue), then open an issue. 👍

from mobx-react-router.