@@ -1321,7 +1321,10 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
                               query,
                               cleanedAs,
                               routeInfo
-                            );
+                            )["catch"](function(e) {
+                              if (e.cancelled) error = error || e;
+                              else throw e;
+                            });
 
                           case 60:
                             if (!error) {

@@ -1053,7 +1053,12 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
               var appComp;
             }
 
-            await this.set(route, pathname, query, cleanedAs, routeInfo);
+            await this.set(route, pathname, query, cleanedAs, routeInfo).catch(
+              e => {
+                if (e.cancelled) error = error || e;
+                else throw e;
+              }
+            );
 
             if (error) {
               Router.events.emit("routeChangeError", error, cleanedAs);

@@ -479,6 +479,11 @@
         try {
           await doRender(renderingProps);
         } catch (renderErr) {
+          // bubble up cancelation errors
+          if (renderErr.cancelled) {
+            throw renderErr;
+          }
+
           if (false) {
           }
 
@@ -682,7 +687,7 @@
         );
       };
 
-      async function doRender(_ref6) {
+      function doRender(_ref6) {
         var { App, Component, props, err, styleSheets } = _ref6;
         Component = Component || lastAppProps.Component;
         props = props || lastAppProps.props;
@@ -698,6 +703,7 @@
 
         lastAppProps = appProps;
         var resolvePromise;
+        var renderPromiseReject;
         var renderPromise = new Promise((resolve, reject) => {
           if (lastRenderReject) {
             lastRenderReject();
@@ -708,9 +714,11 @@
             resolve();
           };
 
-          lastRenderReject = () => {
+          renderPromiseReject = lastRenderReject = () => {
             lastRenderReject = null;
-            reject();
+            var error = new Error("Cancel rendering route");
+            error.cancelled = true;
+            reject(error);
           };
         }); // TODO: consider replacing this with real `<style>` tags that have
         // plain-text CSS content that's provided by RouteInfo. That'd remove the
@@ -727,8 +735,13 @@
             false
           ) {
             return Promise.resolve([]);
-          }
+          } // Clean up previous render if canceling:
 
+          [].slice
+            .call(document.querySelectorAll("link[data-n-staging]"))
+            .forEach(el => {
+              el.parentNode.removeChild(el);
+            });
           var referenceNode = [].slice
             .call(document.querySelectorAll("link[data-n-g], link[data-n-p]"))
             .pop();
@@ -777,19 +790,6 @@
           });
         }
 
-        function onAbort() {
-          [].slice
-            .call(document.querySelectorAll("link[data-n-staging]"))
-            .forEach(el => {
-              el.parentNode.removeChild(el);
-            });
-        }
-
-        renderPromise.catch(abortError => {
-          onAbort();
-          throw abortError;
-        });
-
         function onCommit() {
           if (
             // We can skip this during hydration. Running it wont cause any harm, but
@@ -829,9 +829,26 @@
           )
         ); // We catch runtime errors using componentDidCatch which will trigger renderError
 
-        await onStart();
-        renderReactElement(false ? /*#__PURE__*/ undefined : elem, appElement);
-        await renderPromise;
+        return Promise.race([
+          // Download required CSS assets first:
+          onStart()
+            .then(() => {
+              // Ensure a new render has not been started:
+              if (renderPromiseReject === lastRenderReject) {
+                // Queue rendering:
+                renderReactElement(
+                  false ? /*#__PURE__*/ undefined : elem,
+                  appElement
+                );
+              }
+            })
+            .then(
+              () =>
+                // Wait for rendering to complete:
+                renderPromise
+            ), // Bail early on route cancelation (rejection):
+          renderPromise
+        ]);
       }
 
       function Root(_ref7) {

@@ -710,17 +710,25 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                       return doRender(renderingProps);
 
                     case 7:
-                      _context2.next = 14;
+                      _context2.next = 16;
                       break;
 
                     case 9:
                       _context2.prev = 9;
                       _context2.t0 = _context2["catch"](4);
 
+                      if (!_context2.t0.cancelled) {
+                        _context2.next = 13;
+                        break;
+                      }
+
+                      throw _context2.t0;
+
+                    case 13:
                       if (false) {
                       }
 
-                      _context2.next = 14;
+                      _context2.next = 16;
                       return renderError(
                         (0, _extends2["default"])(
                           (0, _extends2["default"])({}, renderingProps),
@@ -731,7 +739,7 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
                         )
                       );
 
-                    case 14:
+                    case 16:
                     case "end":
                       return _context2.stop();
                   }
@@ -940,217 +948,181 @@ _N_E = (window["webpackJsonp_N_E"] = window["webpackJsonp_N_E"] || []).push([
         };
       };
 
-      function doRender(_x2) {
-        return _doRender.apply(this, arguments);
-      }
-
-      function _doRender() {
-        _doRender = _asyncToGenerator(
-          /*#__PURE__*/ _regeneratorRuntime.mark(function _callee3(_ref8) {
-            var App,
-              Component,
-              props,
-              err,
-              styleSheets,
-              appProps,
-              resolvePromise,
-              renderPromise,
-              onStart,
-              onAbort,
-              onCommit,
-              elem;
-            return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-              while (1) {
-                switch ((_context3.prev = _context3.next)) {
-                  case 0:
-                    onCommit = function _onCommit() {
-                      if (
-                        // We can skip this during hydration. Running it wont cause any harm, but
-                        // we may as well save the CPU cycles.
-                        !isInitialRender && // We use `style-loader` in development, so we don't need to do anything
-                        // unless we're in production:
-                        true
-                      ) {
-                        // Remove old stylesheets:
-                        [].slice
-                          .call(document.querySelectorAll("link[data-n-p]"))
-                          .forEach(function(el) {
-                            return el.parentNode.removeChild(el);
-                          }); // Activate new stylesheets:
-                        [].slice
-                          .call(
-                            document.querySelectorAll("link[data-n-staging]")
-                          )
-                          .forEach(function(el) {
-                            el.removeAttribute("data-n-staging");
-                            el.removeAttribute("media");
-                            el.setAttribute("data-n-p", "");
-                          }); // Force browser to recompute layout, which prevents a flash of unstyled
-                        // content:
-
-                        getComputedStyle(document.body, "height");
-                      }
-
-                      resolvePromise();
-                    };
-
-                    onAbort = function _onAbort() {
-                      [].slice
-                        .call(document.querySelectorAll("link[data-n-staging]"))
-                        .forEach(function(el) {
-                          el.parentNode.removeChild(el);
-                        });
-                    };
-
-                    onStart = function _onStart() {
-                      if (
-                        // We can skip this during hydration. Running it wont cause any harm, but
-                        // we may as well save the CPU cycles.
-                        isInitialRender || // We use `style-loader` in development, so we don't need to do anything
-                        // unless we're in production:
-                        false
-                      ) {
-                        return Promise.resolve([]);
-                      }
-
-                      var referenceNode = [].slice
-                        .call(
-                          document.querySelectorAll(
-                            "link[data-n-g], link[data-n-p]"
-                          )
-                        )
-                        .pop();
-                      var required = styleSheets.map(function(href) {
-                        var _ref10 = (0, _pageLoader.createLink)(
-                            href,
-                            "stylesheet"
-                          ),
-                          _ref11 = _slicedToArray(_ref10, 2),
-                          link = _ref11[0],
-                          promise = _ref11[1];
-
-                        link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
-                        // cross-browser. Since this is so short lived we don't have to worry
-                        // about style thrashing in a print view (where no routing is going to be
-                        // happening anyway).
-
-                        link.setAttribute("media", "print");
-
-                        if (referenceNode) {
-                          referenceNode.parentNode.insertBefore(
-                            link,
-                            referenceNode.nextSibling
-                          );
-                          referenceNode = link;
-                        } else {
-                          document.head.appendChild(link);
-                        }
+      function doRender(_ref8) {
+        var App = _ref8.App,
+          Component = _ref8.Component,
+          props = _ref8.props,
+          err = _ref8.err,
+          styleSheets = _ref8.styleSheets;
+        Component = Component || lastAppProps.Component;
+        props = props || lastAppProps.props;
+        var appProps = (0, _extends2["default"])(
+          (0, _extends2["default"])({}, props),
+          {},
+          {
+            Component: Component,
+            err: err,
+            router: router
+          }
+        ); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+
+        lastAppProps = appProps;
+        var resolvePromise;
+        var renderPromiseReject;
+        var renderPromise = new Promise(function(resolve, reject) {
+          if (_lastRenderReject) {
+            _lastRenderReject();
+          }
 
-                        return promise;
-                      });
-                      return Promise.all(required)["catch"](function() {
-                        // This is too late in the rendering lifecycle to use the existing
-                        // `PAGE_LOAD_ERROR` flow (via `handleRouteInfoError`).
-                        // To match that behavior, we request the page to reload with the current
-                        // asPath. This is already set at this phase since we "committed" to the
-                        // render.
-                        // This handles an edge case where a new deployment is rolled during
-                        // client-side transition and the CSS assets are missing.
-                        // This prevents:
-                        //   1. An unstyled page from being rendered (old behavior)
-                        //   2. The `/_error` page being rendered (we want to reload for the new
-                        //      deployment)
-                        window.location.href = router.asPath; // Instead of rethrowing the CSS loading error, we give a promise that
-                        // won't resolve. This pauses the rendering process until the page
-                        // reloads. Re-throwing the error could result in a flash of error page.
-                        // throw cssLoadingError
-
-                        return new Promise(function() {});
-                      });
-                    };
-
-                    (App = _ref8.App),
-                      (Component = _ref8.Component),
-                      (props = _ref8.props),
-                      (err = _ref8.err),
-                      (styleSheets = _ref8.styleSheets);
-                    Component = Component || lastAppProps.Component;
-                    props = props || lastAppProps.props;
-                    appProps = (0, _extends2["default"])(
-                      (0, _extends2["default"])({}, props),
-                      {},
-                      {
-                        Component: Component,
-                        err: err,
-                        router: router
-                      }
-                    ); // lastAppProps has to be set before ReactDom.render to account for ReactDom throwing an error.
+          resolvePromise = function resolvePromise() {
+            _lastRenderReject = null;
+            resolve();
+          };
 
-                    lastAppProps = appProps;
-                    renderPromise = new Promise(function(resolve, reject) {
-                      if (_lastRenderReject) {
-                        _lastRenderReject();
-                      }
+          renderPromiseReject = _lastRenderReject = function lastRenderReject() {
+            _lastRenderReject = null;
+            var error = new Error("Cancel rendering route");
+            error.cancelled = true;
+            reject(error);
+          };
+        }); // TODO: consider replacing this with real `<style>` tags that have
+        // plain-text CSS content that's provided by RouteInfo. That'd remove the
+        // need for the staging `<link>`s and the ability for CSS to be missing at
+        // this phase, allowing us to remove the error handling flow that reloads the
+        // page.
+
+        function onStart() {
+          if (
+            // We can skip this during hydration. Running it wont cause any harm, but
+            // we may as well save the CPU cycles.
+            isInitialRender || // We use `style-loader` in development, so we don't need to do anything
+            // unless we're in production:
+            false
+          ) {
+            return Promise.resolve([]);
+          } // Clean up previous render if canceling:
 
-                      resolvePromise = function resolvePromise() {
-                        _lastRenderReject = null;
-                        resolve();
-                      };
+          [].slice
+            .call(document.querySelectorAll("link[data-n-staging]"))
+            .forEach(function(el) {
+              el.parentNode.removeChild(el);
+            });
+          var referenceNode = [].slice
+            .call(document.querySelectorAll("link[data-n-g], link[data-n-p]"))
+            .pop();
+          var required = styleSheets.map(function(href) {
+            var _ref9 = (0, _pageLoader.createLink)(href, "stylesheet"),
+              _ref10 = _slicedToArray(_ref9, 2),
+              link = _ref10[0],
+              promise = _ref10[1];
+
+            link.setAttribute("data-n-staging", ""); // Media `none` does not work in Firefox, so `print` is more
+            // cross-browser. Since this is so short lived we don't have to worry
+            // about style thrashing in a print view (where no routing is going to be
+            // happening anyway).
+
+            link.setAttribute("media", "print");
+
+            if (referenceNode) {
+              referenceNode.parentNode.insertBefore(
+                link,
+                referenceNode.nextSibling
+              );
+              referenceNode = link;
+            } else {
+              document.head.appendChild(link);
+            }
 
-                      _lastRenderReject = function lastRenderReject() {
-                        _lastRenderReject = null;
-                        reject();
-                      };
-                    }); // TODO: consider replacing this with real `<style>` tags that have
-                    // plain-text CSS content that's provided by RouteInfo. That'd remove the
-                    // need for the staging `<link>`s and the ability for CSS to be missing at
-                    // this phase, allowing us to remove the error handling flow that reloads the
-                    // page.
-
-                    renderPromise["catch"](function(abortError) {
-                      onAbort();
-                      throw abortError;
-                    });
-                    elem = /*#__PURE__*/ _react["default"].createElement(
-                      Root,
-                      {
-                        callback: onCommit
-                      },
-                      /*#__PURE__*/ _react["default"].createElement(
-                        AppContainer,
-                        null,
-                        /*#__PURE__*/ _react["default"].createElement(
-                          App,
-                          appProps
-                        )
-                      )
-                    ); // We catch runtime errors using componentDidCatch which will trigger renderError
+            return promise;
+          });
+          return Promise.all(required)["catch"](function() {
+            // This is too late in the rendering lifecycle to use the existing
+            // `PAGE_LOAD_ERROR` flow (via `handleRouteInfoError`).
+            // To match that behavior, we request the page to reload with the current
+            // asPath. This is already set at this phase since we "committed" to the
+            // render.
+            // This handles an edge case where a new deployment is rolled during
+            // client-side transition and the CSS assets are missing.
+            // This prevents:
+            //   1. An unstyled page from being rendered (old behavior)
+            //   2. The `/_error` page being rendered (we want to reload for the new
+            //      deployment)
+            window.location.href = router.asPath; // Instead of rethrowing the CSS loading error, we give a promise that
+            // won't resolve. This pauses the rendering process until the page
+            // reloads. Re-throwing the error could result in a flash of error page.
+            // throw cssLoadingError
+
+            return new Promise(function() {});
+          });
+        }
 
-                    _context3.next = 13;
-                    return onStart();
+        function onCommit() {
+          if (
+            // We can skip this during hydration. Running it wont cause any harm, but
+            // we may as well save the CPU cycles.
+            !isInitialRender && // We use `style-loader` in development, so we don't need to do anything
+            // unless we're in production:
+            true
+          ) {
+            // Remove old stylesheets:
+            [].slice
+              .call(document.querySelectorAll("link[data-n-p]"))
+              .forEach(function(el) {
+                return el.parentNode.removeChild(el);
+              }); // Activate new stylesheets:
+            [].slice
+              .call(document.querySelectorAll("link[data-n-staging]"))
+              .forEach(function(el) {
+                el.removeAttribute("data-n-staging");
+                el.removeAttribute("media");
+                el.setAttribute("data-n-p", "");
+              }); // Force browser to recompute layout, which prevents a flash of unstyled
+            // content:
+
+            getComputedStyle(document.body, "height");
+          }
 
-                  case 13:
-                    renderReactElement(
-                      false ? /*#__PURE__*/ undefined : elem,
-                      appElement
-                    );
-                    _context3.next = 16;
-                    return renderPromise;
+          resolvePromise();
+        }
 
-                  case 16:
-                  case "end":
-                    return _context3.stop();
-                }
+        var elem = /*#__PURE__*/ _react["default"].createElement(
+          Root,
+          {
+            callback: onCommit
+          },
+          /*#__PURE__*/ _react["default"].createElement(
+            AppContainer,
+            null,
+            /*#__PURE__*/ _react["default"].createElement(App, appProps)
+          )
+        ); // We catch runtime errors using componentDidCatch which will trigger renderError
+
+        return Promise.race([
+          // Download required CSS assets first:
+          onStart()
+            .then(function() {
+              // Ensure a new render has not been started:
+              if (renderPromiseReject === _lastRenderReject) {
+                // Queue rendering:
+                renderReactElement(
+                  false ? /*#__PURE__*/ undefined : elem,
+                  appElement
+                );
               }
-            }, _callee3);
-          })
-        );
-        return _doRender.apply(this, arguments);
+            })
+            .then(function() {
+              return (
+                // Wait for rendering to complete:
+                renderPromise
+              );
+            }), // Bail early on route cancelation (rejection):
+          renderPromise
+        ]);
       }
 
-      function Root(_ref9) {
-        var callback = _ref9.callback,
-          children = _ref9.children;
+      function Root(_ref11) {
+        var callback = _ref11.callback,
+          children = _ref11.children;
 
         // We use `useLayoutEffect` to guarantee the callback is executed
         // as soon as React flushes the update.

@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-18bcd2a0cc7cca0ea33f.module.js"
+      href="/_next/static/chunks/main-6be3b40e84a0ef19bb63.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.e757038339ef53dbeb92.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b468a46ee8da7b068233.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-aaf42c5c0e6da572c9a8.js"
+      src="/_next/static/chunks/main-d890e543626e630662b3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-18bcd2a0cc7cca0ea33f.module.js"
+      src="/_next/static/chunks/main-6be3b40e84a0ef19bb63.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.65b1856febc630f20327.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0d25e2803cd924f5943c.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.e757038339ef53dbeb92.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b468a46ee8da7b068233.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-18bcd2a0cc7cca0ea33f.module.js"
+      href="/_next/static/chunks/main-6be3b40e84a0ef19bb63.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.e757038339ef53dbeb92.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b468a46ee8da7b068233.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -86,13 +86,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-aaf42c5c0e6da572c9a8.js"
+      src="/_next/static/chunks/main-d890e543626e630662b3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-18bcd2a0cc7cca0ea33f.module.js"
+      src="/_next/static/chunks/main-6be3b40e84a0ef19bb63.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -122,13 +122,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.65b1856febc630f20327.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0d25e2803cd924f5943c.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.e757038339ef53dbeb92.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b468a46ee8da7b068233.module.js"
       async=""
       crossorigin="anonymous"
       type="module"

@@ -6,7 +6,7 @@
     <meta name="next-head-count" content="2" />
     <link
       rel="preload"
-      href="/_next/static/chunks/main-18bcd2a0cc7cca0ea33f.module.js"
+      href="/_next/static/chunks/main-6be3b40e84a0ef19bb63.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -24,7 +24,7 @@
     />
     <link
       rel="preload"
-      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.e757038339ef53dbeb92.module.js"
+      href="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b468a46ee8da7b068233.module.js"
       as="script"
       crossorigin="anonymous"
     />
@@ -81,13 +81,13 @@
       src="/_next/static/chunks/polyfills-f73ba3fc145972ef83e9.js"
     ></script>
     <script
-      src="/_next/static/chunks/main-aaf42c5c0e6da572c9a8.js"
+      src="/_next/static/chunks/main-d890e543626e630662b3.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/main-18bcd2a0cc7cca0ea33f.module.js"
+      src="/_next/static/chunks/main-6be3b40e84a0ef19bb63.module.js"
       async=""
       crossorigin="anonymous"
       type="module"
@@ -117,13 +117,13 @@
       type="module"
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.65b1856febc630f20327.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.0d25e2803cd924f5943c.js"
       async=""
       crossorigin="anonymous"
       nomodule=""
     ></script>
     <script
-      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.e757038339ef53dbeb92.module.js"
+      src="/_next/static/chunks/677f882d2ed86fa3467b8979053c1a4c3f8bc4df.b468a46ee8da7b068233.module.js"
       async=""
       crossorigin="anonymous"
       type="module"