iron:router not rendering template

3
votes

I am working on meteor with the iron:router package. My javascript file contains:

Router.route('/', function () {
  this.render('home');
}, {
  name: 'home'
});

Router.route('/hello', function () {
  this.render('hello');
});

My html file contains:

<head>
  <title>test</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

<template name="home">
  <h2>Home</h2>
  <p>You are on the home screen.</p>
</template>

Whatever I write (localhost:3000/hello or localhost:3000/) as specified in the tutorial, no matter what it will NOT render any template at all. It simply displays the header "Welcome to Meteor!" and that's it.

When I write any other non-declared address such as localhost:3000/abc, it shows me:

Welcome to Meteor! Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/abc."

So it definitely is doing something right in the javascript file, since it recognizes the templates it should know, but still when writing the right address, it shows nothing.

I tried looking at other solutions, check that the package name was "iron:router" and not "iron-router", as well as other solutions, but nothing has worked. Please help me...

Edit: As requested, here is a repository of the project https://github.com/yokhen/test2

2
javascripttemplatesmeteorrenderiron-router
It doesn't even see iron:router package, cause it shows basic template (in body tags). Otherwise if it were routes problem you would see something like Whooops, route for ... doesn't exist. Where do you have your routes .js file? In lib directory? - sdooo
@Sindis I just added extra info. My .js file is in the project folder - Ren
Leave only templates in your html file, delete body and head tags - what does it show now? - sdooo
@Sindis yeah, tried that too, but no nothing shows up. I might give meteorBuzz's answer a try but it'll take me a few minutes, hopefully it works. - Ren
meteorBuzz answer is about layouts, I don't think it will make a difference - maybe create simple github repo with code you already did and we'll check it - sdooo

2 Answers

2
votes

First of all I had to add EJSON package because iron:router didn't see it (although I was testing it on Windows, maybe that's why I had this issue)

meteor add ejson solved it

Your project directory should look like:

enter image description here

Routes.js

Router.route('/', function () {
  this.render('Home');
});

Router.route('/items');

test2.js

Template.items.helpers({

});

Template.items.events({

});

Template.Home.helpers({

});

Template.Home.events({

});

test2.html

<template name="Home">
    <h1>Simplest template home ever</h1>
</template>

<template name="items">
    <h1>Simplest home items template</h1>
</template>
1
votes

Create a 'lib' folder and place the code inside there.

lib/router.js

You need to place {{> yield}} inside your body tags.

<body>
  <h1>Welcome to Meteor!</h1>
    {{> yield}} 
</body>

The iron router guide will also show you how to set up a layoutTemplate that can be used to keep a consistent layout across all templates. You will place the {{> yield}} inside the layout template and use the Router.configure function to yield other templates inside the layoutTemplate.