ActiveReplacement

components.my-component\.js

import Component from '@glimmer/component';
import { inject as service } from '@ember/service' 
import { computed, get, action } from '@ember/object'

export default class extends Component {
	// PUBLIC
  // route = null
	// model = null
  
  @service router
  
  @computed('route','model')
	get url() {
		const { router, args: {route,model} } = this
    const newArgs = [route]
    if (model) {
      newArgs.push(model)
    }
    return router.urlFor(...newArgs);
  }
  
  @computed("router.currentURL", "args.{model,route}")
  get isActive() {
    const { router, args: { model, route } } = this
    const newArgs = [route]
    if (model) {
      newArgs.push(model);
    }
    return router.isActive(...newArgs);
  }
  
  @action
  transitionTo() {
    return this.router.transitionTo(this.url);
  }
  
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route("users", function(){
    this.route("user", { path: "/:user_id" }); 
  })
});

export default Router;

routes.users.user\.js

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

export default Route.extend({
  model() {
    return {}
  }
});

routes.users\.js

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

export default Route.extend({
  model() {
    return [
      { id: 1, name: "Kyle" },
      { id: 2, name: "Rick" }
    ]
  }
});

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.myComponent {
  display: inline-block;
  background: red;
  color: white;
}

.myComponent.active {
  background: green;
  color: white;
}

templates.application\.hbs

<MyComponent 
	@route="users"
>
	Users
</MyComponent>

<hr>

{{outlet}}

templates.components.my-component\.hbs

<div class="myComponent {{if isActive "active"}}">
	<a 
  	href={{url}}
    {{action "transitionTo"}}
   >
		{{yield}}
   </a>
</div>

templates.users\.hbs

<ul>
	{{#each model as |user|}}
  	<li>
    	<MyComponent
      	@route="users.user"
        @model={{user.id}}
      >
      	{{user.name}}
      </MyComponent>
    </li>
  {{/each}}
</ul>

<hr>

{{outlet}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}