---
title: Routing
slug: routing
date: 0005/01/01
number: 5
contents: Learn about routing in Meteor.|Create post discussion pages, with unique URLs.|Learn how to link to those URLs properly.
paragraphs: 72
---
////
////
////
### Adding the Iron Router Package
////
////
////
~~~bash
$ mrt add iron-router
~~~
<%= caption "Terminal" %>
////
////
<% note do %>
### Router Vocabulary
////
- ////
- ////
- ////
- ////
- ////
- ////
- ////
- ////
////
<% end %>
### Routing: Mapping URLs To Templates
////
////
////
<%= diagram "router-diagram", "Layouts and templates.", "pull-center" %>
////
////
~~~html
Microscope
~~~
<%= caption "client/main.html" %>
////
~~~html
~~~
<%= caption "client/views/application/layout.html" %>
////
////
~~~js
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('postsList', {path: '/'});
});
~~~
<%= caption "lib/router.js"%>
////
<% note do %>
### The `/lib` folder
////
////
<% end %>
### Named Routes
////
////
////
////
~~~html
//...
~~~
<%= caption "client/views/application/layout.html"%>
<%= highlight "3" %>
<%= commit "5-1", "Very basic routing." %>
### Waiting on Data
////
////
////
~~~js
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
waitOn: function() { return Meteor.subscribe('posts'); }
});
Router.map(function() {
this.route('postsList', {path: '/'});
});
~~~
<%= caption "lib/router.js" %>
<%= highlight "3,4" %>
////
////
////
////
////
////
~~~html
{{>spinner}}
~~~
<%= caption "client/views/includes/loading.html" %>
////
<%= commit "5-2", "Wait on the post subscription." %>
<% note do %>
### A First Glance At Reactivity
////
////
////
<% end %>
### Routing To A Specific Post
////
////
////
~~~html
{{> postItem}}
~~~
<%= caption "client/views/posts/post_page.html" %>
////
////
~~~js
Router.map(function() {
this.route('postsList', {path: '/'});
this.route('postPage', {
path: '/posts/:_id'
});
});
~~~
<%= caption "lib/router.js" %>
<%= highlight "4~6" %>
////
////
////
////
<%= diagram "router-diagram-2", "The data context.", "pull-center" %>
////
~~~js
Router.map(function() {
this.route('postsList', {path: '/'});
this.route('postPage', {
path: '/posts/:_id',
data: function() { return Posts.findOne(this.params._id); }
});
});
~~~
<%= caption "lib/router.js" %>
<%= highlight "4~7" %>
////
////
<% note do %>
### More About Data Contexts
////
////
~~~html
{{#each widgets}}
{{> widgetItem}}
{{/each}}
~~~
////
~~~html
{{#with myWidget}}
{{> widgetPage}}
{{/with}}
~~~
////
~~~js
{{> widgetPage myWidget}}
~~~
<% end %>
### Using a Dynamic Named Route Helper
////
////
~~~html
~~~
<%= caption "client/views/posts/post_item.html"%>
<%= highlight "6" %>
<%= commit "5-3", "Routing to a single post page." %>
////
////
////
////
////
<%= screenshot "5-2", "A single post page." %>
<% note do %>
### HTML5 pushState
////
////
////
<% end %>