Iron:router page and layout are blank

help
1

Hi,

I am using iron:router in my test meteor project and I have a problem with displaying my Layout and Pages.

You will see on screen shoot that I have two layout files with templates inside with same names as html
defaultLayout.html have template with the same name, also with userLayout.

You will note that those files are under Client project folder.

Also, I have two templates firstPage and secondPage inside defaultLayout.
If I run url / home or second without layouts it shows result, but when I include Layouts then I am getting blank page.

What am I doing wrong with my routes ?

1484×886 63.8 KB

2

I think you can remove the ‘Router.configure’ statements and just do:

Router.route('/', function () {
	this.render('firstPage');
	this.layout('defaultLayout');
});

Router.route('/second', function () {
    	this.render('secondPage');
    	this.layout('userLayout');
});

Also make sure that your layouts have a {{> yield}} somewhere, so that iron router knows where to render the pages.

If it’s still not working, check if you named your templates correctly.

Apart from that:
Make sure you always check your console for errors if such a thing happens. Most times it gives you a pretty good idea what’s going on.

Lastly (just a thought):
You might want to organize your files like so:

- layouts
  - defaultLayout 
  - userLayout 

- pages
  - firstPage 
  - secondPage

Hope this helps.

EDIT:
I think I should mention this…
If you’re just starting with meteor you might want to switch to flow router instead of iron router.
At the moment it’s the recommended router for meteor. If you have questions about that, just ask :slight_smile:

3

Thank you @nilsdannemann,

I tried your suggestions and still have the same issue.

I am using latest meteor v 1.3.1 and when I tried to move my main.html to client/templates or root templates folder I had some errors in console so (in main.html I have defaultLayout template and also firstPage and secondPage templates thats all in one file).

As you can see there are no any other errors in my console but page is still blank…

1600×900 130 KB

I just noted that you mentioned flow router,let me try that.

Thank you @nilsdannemann

1 Like
4

Hm, that’s strange.
I currently use it just like that in one of my older projects (updated it to meteor 1.3).

Anyway, try flow router and see if that works. We’ll figure this out. Don’t worry :slight_smile:

1 Like
5

I find solution for problem with iron router, I am little bit ashamed, but I had problem with missing plugins bootstrap and accounts-ui, facebook…

(When I had some other issues with mu original project, I tried to create new one and to do copy & paste of code in new project, and somehow I forgot to add some of plugins I had in original projects. Also, PowerShell Win Console didn’t show any errors but Chrome dev console was and little bit search I figured out that I did not add all required plugins)

Thank you one more time @nilsdannemann

6

No Problem. :slight_smile:

Happy that you found a solution.

Just in case you still want to switch to flow-router (recommended), here’s a quick Setup for you:

##1. Install Packages
flow router + blaze layout
meteor add kadira:flow-router kadira:blaze-layout

2. Set Layout Root (optional)

Where? client/layouts/config.js

BlazeLayout.setRoot('body');

##3. Create Layouts
Where? client/layouts/defaultLayout.js

<template name="defaultLayout">
    <section class="someclass">
        {{> Template.dynamic template=page}}
    </section>
</template>

3. Create Routes

Where? client/routes.js

FlowRouter.route('/', {
    action: function() {
        BlazeLayout.render('my_layout', {
            page: 'firstPage'
        });
    }
});

Done! :slight_smile:

A nice thing is, that now you can render many different templates in your different layouts.

For example:

##Layout
Where? client/layouts/defaultLayout.js

<template name="defaultLayout">
    <section class="someclass">
        {{> Template.dynamic template=top}}
        {{> Template.dynamic template=main}}
        {{> Template.dynamic template=bottom}}
    </section>
</template>

Routes

Where? client/routes.js

FlowRouter.route('/', {
    action: function() {
        BlazeLayout.render('my_layout', {
            top: 'someTemplate',
            main: 'someTemplate',
            bottom: 'someTemplate',
        });
    }
});

I find this handy for having routes with different page + sidebar combinations.

1 Like
7

Great, thank you very much, I will try it.

1 Like