Router params change is not triggering a re-render of my view

[nareshbhatia]

I enter the following path in the browser:

/orders/123/summary

Everything works, the summary tab is rendered. Now I click on the detail tab. The path changes to:

/orders/123/detail

Nothing changes in the view! The render method is not triggered even though I am dereferencing router.params. Here's my code (simplified):

render() {
    const { store } = this.props;
    const { router: { params } } = store;
    const { orderId, tab } = params;

    console.log('render: ', tab);

    return (
        <div>
            {tab === 'summary' && <Summary />}
            {tab === 'detail' && <Detail />}
        </div>
    );
}

Here's the corresponding route:

order: new Route({
    path: '/orders/:orderId/:tab',
    component: <OrderPage />,
    onEnter: (route, params, store) => {
        console.log('------------> order.onEnter: ', params);
    },
    onParamsChange: (route, params, store) => {
        console.log('------------> order.onParamsChange: ', params);
    }
})

I can see onEnter and onParamsChange being triggered in my route, however that should not matter. The change in tabs should not retrigger a fetch - all I need is to change the view. However puzzled why the view is not reacting to a change in router.params. I confirmed that it is a MobX @observer. What am I doing wrong?

Thanks in advance.

[nareshbhatia]

I am able to reproduce the issue with mobx-router-example. Simply upgrade the mobx versions to:

"mobx": "^3.4.1",
"mobx-react": "^4.3.5",

Now the UserProfile view stops responding to tab changes!

I suspect that this line of code is not triggering a reaction for some reason:

this.params = toJS(paramsObj);

Maybe it is the breaking change introduced in mobx 2.6.0. Is anyone else experiencing this?

[nareshbhatia]

Submitted PR #54 to address this issue.

[nareshbhatia]

PR merged - closing issue.