Route query params change does not trigger remount

[uNmAnNeR]

Hello!

When hash with query params change oninit method is not called and page remains old despite view updates. Only page refresh helps. I suppose, when route change whole component should be recreated like default browser behavior, not just view.

See example here: https://jsfiddle.net/a7uy9L5z/2/

[pygy]

If you want custom diff behavior on route change, you can use a RouteResolve. Here using a key to get the behavior you want if I understand correctly:

m.route(document.body, "/settings", {
    "/settings": {
    	onmatch: function(){return Settings},
    	render: function(vnode){
            var mode = m.route.param("mode") || '' // or vnode.attrs.mode
            vnode.key = mode
            return vnode
        }
    }
});

https://jsfiddle.net/fv5qrenn/

[uNmAnNeR]

Thanks! It works as expected. But it looks like a temporary solution mostly. I guess the common predictable behavior is to completely remount component on any route change. Why just do it on hash change, but dont on query parameters? At least it should be documented thoroughly, please correct me if i missed.

[pygy]

I guess the common predictable behavior is to completely remount component on any route change.

It was the default with v0.2, which provided m.redraw.strategy to overcome it. That API is gone in v1. The router now defers to normal diff semantics.

If two routes point to different components, switching from one to the other will cause the view to be torn down and rebuilt. Not otherwise. It allows for example (using RouteResolver) to have a common layout that's always diffed with a main view that's torn down and rebuilt on route change.

I suggest you read the new router docs to get an idea of what it offers...

Edit: BTW, you're right, that's missing from the v0.2 migration guide.

[uNmAnNeR]

Thanks for explanation!

Probably RouteResolver is the hardest to understand mithril part :) Just to be sure, more common solution while using hash could be:

m.route(document.body,` "/", {
    "<some route>": {
    	onmatch: function(){return RouteComponent},
    	render: function(vnode){
            vnode.key = window.location.hash
            return vnode
        }
    }
});

May help someone else.