CODEWITHSUNDEEP
meteoriron-router
nt.bas
nt.bas

Reputation: 756

Iron router not displaying notFound page

TL,DR: How to make the not found template work within a global layout template given the router is running on the client side only (this is a requirement: client and server routes are separated.)

I need iron:router to display a default template when it couldn't match any router.
In my app, all routers are client side (the router.js file is inside the client folder.)
So far, this is what my code looks like:

  1. router.js - client side

Router.configure({
    layoutTemplate: 'ApplicationLayout'
});

Router.map(function() {
    this.route('home', {
        path: '/',

        onAfterAction: function() {
            document.title = 'MyApp';
        },

        action: function() {
            this.render('Home');
            this.render('Menu', {to: 'menu'});
            this.render('Footer', {to: 'footer'});
        } 
    });

    this.route('notFound', {
        path: '*',

        onAfterAction: function() {
            document.title = 'Page not found - MyApp';
        },

        action: function() {
            this.render('NotFound');
            this.render('Menu', {to: 'menu'});
            this.render('Footer', {to: 'footer'});
        }

    });
});

  1. ApplicationLayout.html

<template name="ApplicationLayout">
      
  <div class="nav-container">
    {{> yield "menu"}}
  </div>

  <div class="main-container">
    {{> yield}}
  </div>

  <div class="footer-container">
    {{> yield "footer"}}
  </div>

</template>

Reading the docs at http://eventedmind.github.io/iron-router/#404s-and-client-vs-server-routes, it appears the server sends a 404 but it wasn't. So I made another router on the server side that sends a 404 but even that fixed nothing.

  1. router.js - server side

Router.map(function() {
    this.route('notFound', {
        path: '*',

        action: function() {
            this.response.statusCode = 404;
            this.response.end();
        }
    }); 
});

Result so far:
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/logi/."

Other attempts:
I tried including a notFoundTemplate in the global router configuration and it did display the NotFound template but not within the layoutTemplate the Menu and Footer templates are not loaded. But if I understand correctly, such template is called when the data function returns null - https://github.com/EventedMind/iron-router/issues/116, see answer by cmather.

Relevant details:

  1. [email protected]
  2. iron:[email protected]

EDIT

Using the notFoundTemplate property in the configuration does show the NotFound template but omits the Menu and Footer templates.

Upvotes: 1

Views: 2455

Answers (3)

Meteorpoly
Meteorpoly

Reputation: 938

I've create a small sample project to show you that it is working as described above. Let me know if it helped.

https://github.com/meteorpoly/sof-iron-router-sample

Upvotes: 1

Meteorpoly
Meteorpoly

Reputation: 938

Ok then please try that and let me know if it worked:

<template name="NotFound">

  <div class="nav-container">
    {{> yield "menu"}}
  </div>

  Ups... nobody here?

  <div class="footer-container">
    {{> yield "footer"}}
  </div>

</template>

Upvotes: 1

Meteorpoly
Meteorpoly

Reputation: 938

All you need is this:

Define your general templates in the Router configuration (server and client location)

Router.configure({
  layoutTemplate: "MasterLayout",
  loadingTemplate: "Loading",
  notFoundTemplate: "NotFound"
});

Define your general templates under the client folder

<template name="NotFound">
  Ups... nobody here?
</template>

<template name="Loading">
  Loading awesome things...
</template>

<template name="MasterLayout">
    <div layout horizontal center-center fit id="content">
        {{> yield}}
    </div>
</template>

The try to navigate for example to http://localhost:3000/nothinghereyet which should return Ups... nobody here?

Upvotes: 6

Related Questions