Ember - Page not getting displayed

I am trying my first ember application. It has two pages. One is the Welcome page and the other page lists student details. so I have created two routes namely index and studentdb. The problem is my second page is not getting displayed. I have used Mirage as I am following ember guides. The code is as below:

templates/index.hbs

<h1> Welcome </h1>

{{#link-to "studentdb"}}List{{/link-to}}

{{outlet}}

templates/studentdb.hbs

<h2> Welcome to Student Database </h2>
<h4> Following are the details </h4>

{{#each model as |student|}}
  <p>Name: {{student.Name}}</p>
  <p>College: {{student.College}}</p>
  <p>Department: {{student.Department}}</p>
{{/each}}

{{outlet}}

routes/studentdb.js

import Ember from 'ember';

export default Ember.Route.extend({

    model() {
        return this.store.findAll('student');
    }
});

models/student.js (model)

import DS from 'ember-data';

export default DS.Model.extend({
  Name: DS.attr(),
  College: DS.attr(),
  Department: DS.attr()
});

mirage/config.js

export default function() {

  this.get('/rentals', function() {
    return {
      data: [{
        type: 'student',
        id: 1,
        attributes: {
          Name: 'Archana',
          College: 'MNM Jain',
          Department: 'CSE'

        }
      }, {
        type: 'student',
        id: 2,
        attributes: {
          Name: 'Monica',
          College: 'Sathyabama',
          Department: 'IT'
        }
      }, {
        type: 'student',
        id: 3,
        attributes: {
          Name: 'Manoj',
          College: 'Kumarsaamy',
          Department: 'MECH'
        }
      }]
    }
  });


}

Kindly someone help. Thanks in advance.