Issue with notFound never triggered

[Nyholm]

I have a simple route like:

router
  .on({
    '/product/:id': function (params) {
      renderProduct(params.id)
    },
    '/':function() {
      renderStartpage();
    }
  })
  .notFound(function() {
    pageNotFoundController();
  });

If the URL is / it will go to start page. Also if the URL is /foobar. I can never seem to be triggering the pageNotFoundController().

How should I configure my routes differently? Naturally I only want to valid routes: / and /product/XX.

[nordskill]

I have exactly the same problem: root handler doesn't work with notFound handler.

[nordskill]

I guess I've found a workaround for this issue:

router.on(function () {
   if (window.location.pathname.length > 1) {
    console.log('404');
   } else {
    console.log('home');
   }
}).resolve();

[krasimir]

@Nyholm @nordskill just released 4.2.0. In here you'll find a test that is replicating your issue. Can you please use the new version and let me know if it works.

[nordskill]

Hello, Krasimir
It seems still not to be working for me.

[krasimir]

@nordskill can you please post your route definitions.

[nordskill]

I'm actually trying the refined version of your demo: http://nordskill.com/dock/navigo/scripts.js
The page itself (without content, but buttons are clickable): http://nordskill.com/dock/navigo

[johnhult]

I'm having the same problem. All routes on base level (webpage/foourl) goes into '/' instead.
Also, going into webpage/foobar/suburl gives me a whole lotta errors

My routing looks like

var rootUrl = '';
var useHash = false;
var router = new Navigo(rootUrl, useHash);

router.on({
	'/': function() {
		console.log('/ (home)');
		mainNavigation('home');
		setTimeout(function() {
			runHome();
		}, 600);
	},
	'/bio': function() {
		console.log('bio');
		openOverlay('');
		runBio();
	},
	'/work': function() {
		console.log('work');
		mainNavigation('work');
		setTimeout(function() {
			runWork();
		}, 600);
	},
	'/blog': function() {
		console.log('blog');
		mainNavigation('blog');
		setTimeout(function() {
			runBlog();
		}, 600);
	}
})
.notFound(function() {
	console.log('page not found');
})
.resolve();

[krasimir]

@nordskill sorry, I think I didn't make this clear and it looks like I deleted gh-pages branch only locally. The Navigo file that you are using is an old one and does not have the notFound method. You are getting that in the console:

Please use the latest version from https://github.com/krasimir/navigo/tree/master/lib or npm.

[krasimir]

@johnhult can you please make sure that you are using the latest version. Also something really important ⚠️ - the order of how you add the routes matter. So make sure that you put the / at the end of your on call.

[johnhult]

@krasimir I changed the position of the / to the end instead but nothing really changed. Said two different things in the README.md, so I thought it didn't matter :) I have the latest npm version of navigo so that should be okay.

What happens is that if I go to /asdf (i.e. a non-existing route) it will just load the /asdf route as the root route instead. If I then try to navigate to for example /work, it will instead go to /asdf/work.

I was wondering if it could have something to do with my gulptask if it isn't Navigo itself?

	gulp.task('express', function() {
		var express = require('express');
		app = express();
		app.use(historyApiFallback());
		app.use(require('connect-livereload')({port: 4001}));
		app.use(express.static(__dirname));
		app.listen(4000);
	});

[krasimir]

@johnhult that historyApiFallback may be in a conflict with Navigo. We've made a couple of releases last week that may address those issues. Can you please download the latest version and let me know a URL (if possible) to reproduce the problem one more time.

[krasimir]

Closing this one. Let me know guys if you still experience similar issues and will reopen.

[andrewheekin]

getting the same issue as @johnhult from Mar 30. When I manually enter an non-existent route /asdf, it renders the content from the default route / but leaves the incorrect route /asdf in the url and builds on it in subsequent requests (/asdf/projects). I'm using webpack-dev-server and historyApiFallback, project here: https://github.com/andrewheekin/andrewdotcom-es6, all routing is in js/router.js

[ghost]

I am using navigo on NodeJS and all of my requests redirected on default path ('*' or '/'). In HTTP Request Handler Function i am calling router.navigate(path).resolve(). If i calling navigate(path) without resolve() - router ignored. How to solve this problem?