How to render ember template for a nested dynamic route?

Question

js`, I have declared some nested routes like this:

Router.map(function() {
  this.route('index', { path: '/' })
  this.route('orders', function() {
    this.route('details', { path: '/:order_id' });
  });
  this.route('not-found', { path: '/*path' });
});

Here the orders.details template is not rendering, the but it is going to the correct route file, Here is the route file:

import Route from '@ember/routing/route';

export default Route.extend({
  model(params) {
    const { order_id } = params;
    console.log('params', params);
    return order_id;
  },
  renderTemplate() {
    this.render('orders/details')
  }
});

I also declared the template in a nested manner within orders folder:

This does not render the orders/details template, it always goes to the orders template. Here is my orders/details.hbs template:

<h2>Order {{this.model}}</h2>
{{outlet}}

Here is how I am navigating to the route: {{#link-to 'orders.details' order.id}}{{order.description}}{{/link-to}}

Answer 1

As @Gaurav said , see if you didn't forget to use {{outlet}} in your Orders template

{{!-- Orders.hbs --}}
{{!--  any content for orders--}}
{{outlet}} {{!-- orders.details will load here--}}

so if you don't include {{outlet in your orders template , the orders.details won't load }}