Search code examples
javascripttemplatesmeteorrenderiron-router

iron:router not rendering template

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

Solution

  • 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>