No use with react-router v4

When I click the <Link> to redirect, the url in browser correctly change but nothing happen in the page.

Here is my code:

// Root.tsx
import * as React from 'react'
import createBrowserHistory from 'history/createBrowserHistory'
import {Link, Route, Switch} from 'react-router-dom'
import {Provider} from 'mobx-react'
import {Router} from 'react-router'
import {syncHistoryWithStore, RouterStore} from 'mobx-react-router'

const routing = new RouterStore()

const browserHistory = createBrowserHistory()

const history = syncHistoryWithStore(browserHistory, routing)

function PageHome () {
  return (
    <div>
      <h1>home</h1>
      <Link to='/404'>404</Link>
    </div>
  )
}

function Page404 () {
  return (
    <div>
      <h1>404</h1>
      <Link to='/'>home</Link>
    </div>
  )
}

export default class Root extends React.Component<void, void> {
  render () {
    return (
      <Provider routing={routing}>
        <Router history={history}>
          <Switch>
            <Route path='/' exact component={PageHome}/>
            <Route component={Page404}/>
          </Switch>
        </Router>
      </Provider>
    )
  }
}

// index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Root from './Root'
import {AppContainer} from 'react-hot-loader'
import './styles/base.styl'

const render = (Root: any) => {
  ReactDOM.render(
    <AppContainer>
      <Root/>
    </AppContainer>,
    document.getElementById('app')
  )
}

render(Root)

if (module.hot) {
  module.hot.accept('./Root', () => {
    const nextRoot = require('./Root').default
    render(nextRoot)
  })
}

[robksawyer]

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 {
...
}

[alisd23]

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