How can I transitionTo a route that includes a model id, from having the id stored in a variable?

Here is my router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('category', {path: '/category/:category_id'});
  this.route('listing', {path: '/listing/:listing_id'});
});

export default Router;

I'm trying to make it so that when the user selects an option from the navbar component, they will be redirected to the appropriate categories/category_id page. I am able to get the right ID into a variable in the navbar component but my this.transitionTo statement does not work. Here is the navbar-header.js:

import Ember from 'ember';

export default Ember.Component.extend({
  model() {
     return this.store.findAll('category');
   },
   actions: {
     categorySelected: function(){
       debugger;
       var e = document.getElementById("categories");
       var catId = e.options[e.selectedIndex].value;
       //I have verified that catId contains the appropriate ID at this point.

       //Where the error happens:
      this.transitionTo('/category/' + catId);
     }
   }
});

What am I doing wrong?