Routing in Meteor

While creating a website we need our pages to be accessible via permalink , a URL of the form This means we’ll need some kind of routing to look at what’s inside the browser’s URL bar and display the right content accordingly.

Iron Router is a routing package that was conceived specifically for Meteor apps. Not only does it help routing, but it also take care of filters and even manages subscriptions.

First, let’s install the package from Atmosphere:

[cc lang=”javascript”]
meteor add iron:router

Iron Router lets us break out of this mold by taking over what renders inside the HTML tag. So we won’t define that tag’s content ourselves, as we would with a regular HTML page. Instead, we will point the router to a special layout template that contains a {{> yield}} template helper.

This {{> yield}} helper will define a special dynamic zone that will automatically render whichever template corresponds to the current route.


We’ll start by creating our layout and adding the {{> yield}} helper. First, we’ll remove our HTML tag from main.html, and move its contents to their own template, layout.html.

Iron Router will take care of embedding our layout into the stripped-down main.html template for us, which now looks like this:

[cc lang=”javascript”]



While the newly created layout.html will now contain the app’s outer layout:

[cc lang=”html”]

{{> yield}}


After this change, our browser tab will show the default Iron Router help page. This is because we haven’t told the router what to do with the / URL yet, so it simply serves up an empty template.

To begin, we can regain our old behavior by mapping the root / URL to the postsList template. We’ll create a new router.js file inside the /lib directory at our project’s root:

[cc lang=”html”]
layoutTemplate: ‘layout’
Router.route(‘/’, {name: ‘postsList’});




, ,


Recent Post

  • How to Implement File Uploads in Node.js with Multer?

    For many web applications that let users share papers, photos, and other types of material, file uploads are a necessary functionality. Multer is a well-liked middleware used for Handling file uploads in Node.js using Multer the Node.js environment to effectively handle file uploads. We’ll look at how to use Multer to create file uploads […]

  • How to Use Local Storage to Persist Data in a JavaScript Application?

    Data persistence is a key aspect of web applications. In JavaScript, one of the primary tools for achieving this is Local Storage, a part of the Web Storage API. This JavaScript data persistence tool provides a simple key-value storage mechanism within the user’s browser. Unlike session storage, which persists data only during a session, Local […]

  • How to Use WordPress API?

    WordPress stands out as a leading content management system, celebrated for its dynamic capabilities in website and blog development. Renowned for its rich feature set and extensive customization options, WordPress empowers creators to fashion captivating online experiences. In recent times, WordPress has expanded its horizons into the realm of APIs, granting developers a potent tool […]

  • How to Use Post and Pre Hooks in Mongoose?

    In Mongoose, a widely-used library for working with MongoDB, there are valuable tools called “Pre and Post Hooks.” These hooks, also known as “Mongoose Middleware” or “Mongoose Model Hooks,” allow developers to run their own code just before or after specific actions on the database. With “Pre Hooks,” you can customize actions before they happen, […]

  • How To Create Reusable Components in React: Best Practices

    Rеact is a popular library for building usеr intеrfacеs with JavaScript. One of the main benefits of Rеact is its ability to create reusable componеnts that can be used in different parts of your application. Reusable componеnts can help you savе timе, rеducе codе duplication, and еnsurе consistеncy in your UI. However, creating rеusablе componеnts […]

  • Implementing Higher Order Components in Class-Based Components for Code Reusability in ReactJS

    Rеact is a powerful library for building usеr intеrfacеs, and one of its corе strengths liеs in its componеnt-basеd architеcturе. Componеnts arе thе building blocks of Rеact applications, and thеy allow you to crеatе modular and rеusablе piеcеs of UI. Howеvеr, as your application grows, you may find thе nееd for rеusing cеrtain functionalitiеs across […]