Can't get LinkTo to work

Questions Routing
1

Hello I am creating a footer component and am using the following code to link to 2 of my pages:

app/components/footer.hbs

<footer class="border-top py-3 mt-5">
  <div class="container">
    <p>
      Powered By <a href="https://www.bitbucket.org/ookma-kyi/ookma-kyi-core">Ookma-Kyi Core Engine</a>
    </p>
    <p class="text-center p-3">
      <LinkTo @route="terms-of-service">Terms of Service</LinkTo> |
      <LinkTo @route="privacy-policy">Privacy Policy</LinkTo>
    </p>
  </div>
</footer>

However the links aren’t working and when i check the code in view-source I get this:


0; //eaimeta@70e063a35619d71f0,"ember-cli-htmlbars",0,"@ember/component/template-only"eaimeta@70e063a35619d71f
  const __COLOCATED_TEMPLATE__ = (0, _templateFactory.createTemplateFactory)(
  /*
    <footer class="border-top py-3 mt-5">
    <div class="container">
      <p>
        Powered By <a href="https://www.bitbucket.org/ookma-kyi/ookma-kyi-core">Ookma-Kyi Core Engine</a>
      </p>
      <p class="text-center p-3">
        <LinkTo @route="terms-of-service">Terms of Service</LinkTo> |
        <LinkTo @route="privacy-policy">Privacy Policy</LinkTo>
      </p>
    </div>
  </footer>
  */
  {
    "id": "J7SgKX72",
    "block": "[[[10,\"footer\"],[14,0,\"border-top py-3 mt-5\"],[12],[1,\"\\n  \"],[10,0],[14,0,\"container\"],[12],[1,\"\\n    \"],[10,2],[12],[1,\"\\n      Powered By \"],[10,3],[14,6,\"https://www.bitbucket.org/ookma-kyi/ookma-kyi-core\"],[12],[1,\"Ookma-Kyi Core Engine\"],[13],[1,\"\\n    \"],[13],[1,\"\\n    \"],[10,2],[14,0,\"text-center p-3\"],[12],[1,\"\\n      \"],[8,[39,0],null,[[\"@route\"],[\"terms-of-service\"]],[[\"default\"],[[[[1,\"Terms of Service\"]],[]]]]],[1,\" |\\n      \"],[8,[39,0],null,[[\"@route\"],[\"privacy-policy\"]],[[\"default\"],[[[[1,\"Privacy Policy\"]],[]]]]],[1,\"\\n    \"],[13],[1,\"\\n  \"],[13],[1,\"\\n\"],[13]],[],false,[\"link-to\"]]",
    "moduleName": "client/components/footer.hbs",
    "isStrictMode": false
  });

According to the documentation it should be converted to tags, but it isn’t. Here are my routes

app/router.js

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

export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}

Router.map(function () {
  this.route('legal', function () {
    this.route('terms-of-service');
    this.route('privacy-policy');
  });
});

Any ideas?
2

Your routes are nested, so you need to reference them by their nested name using dots as a separator.

In your case you want:

    <p class="text-center p-3">
      <LinkTo @route="legal.terms-of-service">Terms of Service</LinkTo> |
      <LinkTo @route="legal.privacy-policy">Privacy Policy</LinkTo>
    </p>

Also to address this:

According to the documentation it should be converted to tags, but it isn’t.

It is true they are converted to tags but you’re looking at the wrong spot for the final DOM output. The comment block that gets inserted into the javascript class is just the template literal, that is, with no rendering performed. To see the actual DOM output you want to look at the DOM inspector in your browser dev tools. The easiest way to do that is to right click on the link in your app and click “Inspect Element” or whatever the phrasing is in your browser of choice.

Hope that helps!