CODEWITHSUNDEEP
meteoriron-router
Kevin Dark
Kevin Dark

Reputation: 2149

Router for static site using Meteor

I'm new to Meteor and have limited experience with javascript. I've searched all the stack post and the web for a good tutorial on how to use the Iron Router package to route static pages and just can't seem to figure it this out. I would love to have someone help me understand how to setup a router.js file for Home and About. I've played with my code a lot but this is what I had before posting here. Conseptually I seem to be struggling to grasp how the routing works and all the various features of iron router and then connecting these routes into a nav bar where I can navigate between them. Thank you in advance for any help you can provide.

client/templates/application/layout.html

<template name="layout">
  <div class="container">
    {{> yield}}
  </div>
</template>

lib/router.js

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

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

  this.render('about', {
    template: 'about'
  });
});

templates/home.html

<template name="home">
  <div class="container">
    <h2>Home</h2>
  </div>
</template>

Upvotes: 1

Views: 597

Answers (2)

Ethaan
Ethaan

Reputation: 11376

You can have 3 templates on your folder

Client/Views

with the name of

about.html
main.html
admin.html
layout.html
(for example)

So in the about.html you have this 

<template name="about">
<h1> hello from about page
</template>

<template name="main">
<h1> hello from about page
</template>

<template name="admin">
<h1> hello from about page
</template>

the Layout.html file need con taints this yield rendered.

<template name="layout">
  {{> yield}}
  {{admin}}
  {{about}}
  {{main}}
</template>

So you can use layout template as a master page and calling that 3 templates separates by a route, how to assign a route and telling meteor to use that layouts, well use this js code

JS

Router.configure({
  layoutTemplate: 'layout'
});
Router.map(function(){
  this.route('admin', {path: '/admin'});
});
Router.map(function(){
  this.route('about', {path: '/about'});
});
Router.map(function(){
  this.route('main', {path: '/'});
});

At least this works for me bro, hope this work for you

Upvotes: 0

Tarang
Tarang

Reputation: 75945

The code you have above looks correct.

One quirk is you're rendering two pages for your / route. You should have this:

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

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

Remember this.render takes the first param as the template, so there's no need to define it separately anymore.

And a new about.html page:

<template name="home">
    <div class="container">
        <h2>Home</h2>
    </div>
</template>

Now you can use the / and /about pages (at least I hope i've not missed anything)

Upvotes: 1

Related Questions