import React from 'react';
import { routerShape } from 'react-router/lib/PropTypes';
import { autorun, action } from 'mobx';
import { observer } from 'mobx-react';
import store from './store';
@observer class Wizard extends React.Component {
In MobX 3.x/Mobx-React 4.x, @observer components' props are made
observable, so referencing this.props.route.selectRoute inside the
autorun would cause it to fire not only when store.stage changes but when
location changes, thus making user navigation between screens impossible.
So, dereference early to make it NOT observable.
const selectRoute = this.props.route.selectRoute;
autorunDisposer = autorun(() => {
const path = selectRoute();
// any observable accessed inside the action will
// not cause this autorun to re-run if it changes
if (path && !this.props.router.isActive(path)) {
this.props.router.push(path);
autorunDisposer && autorunDisposer();
children: React.PropTypes.element,
router: routerShape, // React-Router provides this automatically
// props provided to Route component are available here:
route: React.PropTypes.shape({
selectRoute: React.PropTypes.func,