Use Separate Route and Template Files

Keep route logic in app/routes/*.js and route templates in app/templates/*.gjs. Route classes imported from @ember/routing/route do not support inline <template> blocks.

Incorrect (inline template inside a route class):

// app/routes/posts.gjs
import Route from '@ember/routing/route';

export default class PostsRoute extends Route {
  model() {
    return this.store.request({ url: '/posts' });
  }

  <template>
    <h1>Posts</h1>
    <ul>
      {{#each @model as |post|}}
        <li>{{post.title}}</li>
      {{/each}}
    </ul>

    {{outlet}}
  </template>
}

Correct (separate route module and template file):

// app/routes/posts.js
import Route from '@ember/routing/route';

export default class PostsRoute extends Route {
  model() {
    return this.store.request({ url: '/posts' });
  }
}

// app/templates/posts.gjs
<template>
  <h1>Posts</h1>
  <ul>
    {{#each @model as |post|}}
      <li>{{post.title}}</li>
    {{/each}}
  </ul>

  {{outlet}}
</template>

With a separate template file for route UI:

// app/routes/posts.js
import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class PostsRoute extends Route {
  @service store;

  model() {
    return this.store.request({ url: '/posts' });
  }
}

// app/templates/posts.gjs
<template>
  <div class="posts-page">
    <h1>Posts</h1>

    {{#if @model}}
      <ul>
        {{#each @model as |post|}}
          <li>{{post.title}}</li>
        {{/each}}
      </ul>
    {{/if}}

    {{outlet}}
  </div>
</template>

Template-only routes:

// app/templates/about.gjs
<template>
  <div class="about-page">
    <h1>About Us</h1>
    <p>Welcome to our application!</p>
  </div>
</template>

Keeping route classes and route templates in their conventional files matches Ember's supported routing model and makes examples easier to apply in real apps.

Reference: Ember Routes