Having Problems with React Router v4 / Mobx - reactjs

Question

I can't get my routing to work when I click on my button nothing happens. I am using mobx-react-router
import plannerStore from './PlannerStore';
import { RouterStore } from 'mobx-react-router';
const routingStore = new RouterStore();
const stores = {
plannerStore,
routingStore
}
export default stores;
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { useStrict } from 'mobx';
import createBrowserHistory from 'history/createBrowserHistory';
import { syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router';
import App from './App';
import PlannerComponent from './components/PlannerComponent';
const browserHistory = createBrowserHistory();
import stores from './stores/index';
const history = syncHistoryWithStore(browserHistory, stores.routingStore);
useStrict(true);
ReactDOM.render(
<Provider {...stores}>
<Router history={history}>
<PlannerComponent />
</Router>
</Provider>,
document.getElementById('root')
);
import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {observer, inject} from 'mobx-react';
import CourseComponent from './CourseComponent';
import GradeComponent from './GradeComponent'
import { Route } from 'react-router';
#inject('plannerStore', 'routingStore')
#observer
export default class PlannerComponent extends Component {
constructor() {
super();
}
render() {
return (
<div>
<CourseComponent />
<Route path='/grade' component={GradeComponent}/>
</div>
)
}
}
import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import {observer, inject} from 'mobx-react';
import planner from '../styles/planner.scss'
#inject('plannerStore', 'routingStore')
#observer
export default class CourseComponent extends Component {
constructor() {
super();
}
render() {
const { location, push, goBack } = this.props.routingStore;
return (
<div >
<button onClick={() => push('/grade')}>grades</button>
</div>
)
}
}

Answer 1

It is because #observer is optimizing shouldComponentUpdate, and prevents your component from updating. You can wrap a component with the withRouter higher-order component and it will be given the current location as one of its props, so the Route will know that the location changed.
You can read more here: React Router Docs

Answer 2

Try to inject the routingStore in a component containing the Router component instead if the PlannerComponent, something like this:
#inject("routingStore")
#observer
class AppContainer extends Component {
render() {
return (
<Router history={history}>
<PlannerComponent />
</Router>
);
}
}
and then:
ReactDOM.render(
<Provider {...stores}>
<AppContainer/>
</Provider>,
document.getElementById('root')
);