How to structure correctly route and folders in emberjs?

Say I have this folder structure:

- app
-- pods
--- dashboard
----- zones
------ index
------- controller.js
------- route.js
------- template.hbs
------ show
------- areas
-------- controller.js
-------- route.js
-------- template.hbs
------- controller.js
------- route.js
------- template.hbs

And in router.js

    this.route('zones', function() {
      this.route('show', { path: ':zone_id/cities' }, function() {
        this.route('areas', { path: ':city_id/areas'});
      });
    });

Now

When I visit dashboard/zones - all zones will be loaded

And when I clicked one item from zones, it will be redirected to dashboard/zones/1/cities which will load cities in page

And when I clicked one item from cities, it will be redirected to /dashboard/zones/1/cities/4/areas -

Now the problem is /dashboard/zones/1/cities/4/areas url is correctly hit, but the template is not showing.

What is missing or wrong with my setup ?