Template appends with another template in meteor app

I have been trying to link two pages. But, whenever i click on the link to go to another page, it renders the template in the same page.

1st template.

<template name = "home">
  <p>Hello, {{emailAddress}}</p>
  <a href="/create">To create</a>
  <p><a href="#" class="logout">Click to Log out</a></p>
</template>

2nd template.

<head>
  <title>Create your page here</title>
</head>
<body>
  {{> create}}
</body>

<template name = "create">
  <p>Hi, create your page here!!</p>
</template>

and the router.js file is..

this.route('create',{
  path:'/create',
});

A snapshot of what it is ,is in the image. https://i.sstatic.net/mgzxH.jpg

Solution

Step 1: Remove the <body> tag. Iron router works by appending to the body, so just as you experienced, whatever you add in there will always appear on every page. Generally it's best not to use one, and instead rely on layouts.

Step 2: Define all of your routes. Replace the contents of your router.js with this:

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

Router.route('/create');

See the guide for more details.