Router routeMissing problem

[Marcel]

Hello,

In my SPA (not mobile) application i'm using the Kendo Router for navigation within the application.
The Router works perfect except for 1 problem i'm running into.
When someone navigates to an invalid route it's caught through the routeMissing method to prevent navigating to invalid routes.
So navigating from http://mysite/#/myView to http://mysite/#/myViewtest results in the routeMissing being called and the navigation is prevented.
However, the browsers address bar shows the address which was navigated to (http://mysite/#/myViewtest).
If the user hits the browsers refresh button after that the application starts again and tries to navigate to the wrong address, which now results in a blank page.
Trying to navigate back to the old route in the routeMissing method doesn't work, since it didn't acually change for the router (defaultPrevented).

Is there any way to navigate to the old route or update the address bar with the old route ?

Thanks in advance.

[Petyo]

Hi Marcel,

are you calling the preventDefault method of the event parameter? This approach should work in general. If possible, can you please provide an example of this misbehavior? We will take a look. 

Regards,
Petyo
Telerik

[Marcel]

Hi Petyo,

I tried using the e.preventDefault(), but without success.

(function ($, CIX, kendo) {

    /// <summary>Applicatie Class</summary>

    CIX.Application = function (options) {

         

        var _router = new kendo.Router({ change: function (e) { _routeChanged(e); }, routeMissing: function (e) { _invalidRoute(e); } });

 

        var _invalidRoute = function (e) {

            e.preventDefault();

            _toastr.error("invalid address (" + e.url + ")");

        }       

    }

}


After typing an invalid url in the addressbar the routeMissing (_invalidRoute) method gets called but the url in the addressbar doesn't change back.
I solved it in a different way to update the addressbar back to the old url.

(function ($, CIX, kendo) {
    /// <summary>Applicatie Class</summary>
    CIX.Application = function (options) {

        var _router = new kendo.Router({ change: function (e) { _routeChanged(e); }, routeMissing: function (e) { _invalidRoute(e); } });

        var _invalidRoute = function (e) {
            _toastr.error("invalid address (" + e.url + ")");
            var currentHash = location.hash;
            var newHash = "#" + _currentUrl;
            var oldUrl = window.location.href.replace(currentHash, newHash);
            window.location = oldUrl;
        }

    }
}

[Petyo]

Hello Marcel,

this behavior does not seem right, but I could not reproduce it, so I would like to ask you for your assistance, if possible. I made an empty page with the following snippet:

<script>
      var router = new kendo.Router({
          routeMissing: function(e) {
            console.log(e);
            if (e.url == "/foo") {
                e.preventDefault();
            }
          }
      });

      router.start();
  </script>

then I manually added #/foo to the end of the url. The url was reverted to the previous one. I used Google Chrome 28 for my tests. Can you please try the same on your side? Perhaps I am missing something. 

Regards,
Petyo
Telerik