Fix lifecyle method workarounds (#2378)

Essentially, whenever a route is loaded, we add a key to that component. If the key changes, the page completely rerenders. Switching between different routes handled by the same key triggers those rerenders.

js/src/common/components/Page.js

@@ -10,7 +10,11 @@ export default class Page extends Component {
   oninit(vnode) {
     super.oninit(vnode);
 
-    this.onNewRoute();
+    app.previous = app.current;
+    app.current = new PageState(this.constructor, { routeName: this.attrs.routeName });
+
+    app.drawer.hide();
+    app.modal.close();
 
     /**
      * A class name to apply to the body while the route is active.
@@ -20,20 +24,6 @@ export default class Page extends Component {
     this.bodyClass = '';
   }
 
-  /**
-   * A collections of actions to run when the route changes.
-   * This is extracted here, and not hardcoded in oninit, as oninit is not called
-   * when a different route is handled by the same component, but we still need to
-   * adjust the current route name.
-   */
-  onNewRoute() {
-    app.previous = app.current;
-    app.current = new PageState(this.constructor, { routeName: this.attrs.routeName });
-
-    app.drawer.hide();
-    app.modal.close();
-  }
-
   oncreate(vnode) {
     super.oncreate(vnode);
 

js/src/common/utils/mapRoutes.js

@@ -10,12 +10,13 @@
 export default function mapRoutes(routes, basePath = '') {
   const map = {};
 
-  for (const key in routes) {
-    const route = routes[key];
+  for (const routeName in routes) {
+    const route = routes[routeName];
 
     map[basePath + route.path] = {
       render() {
-        return m(route.component, { routeName: key });
+        const key = routeName + JSON.stringify(m.route.param());
+        return [m(route.component, { routeName, key })];
       },
     };
   }