iron-pages' selected route won't bring content

Question

I just started trying to use Polymer through the yeoman generator. It scaffolded what seems to be the same code from polymer starter kit.

I proceeded to tweak the app/index.html to add what I need and remove what I don't, then I was trying to set up the routes I will use. Since there was already a paper-menu with a bunch of anchors to different routes, I proceeded to copy one of them and only changed the name of my route to 'about':

<a data-route="users" href="/users" on-click="onDataRouteClick">
  <iron-icon icon="info"></iron-icon>
  <span>Users</span>
</a>

<a data-route="about" href="/about" on-click="onDataRouteClick">
  <iron-icon icon="info"></iron-icon>
  <span>About</span>
</a>

(first one is the already present and working, second is the copied version)

Then, on the main content area, I proceeded to do the same with a section inside the iron-pages tag:

<section data-route="users">
  <paper-material elevation="1">
    <h2 class="page-title">Users</h2>
    <p>This is the users section</p>
    <a href="/users/Rob">Rob</a>
  </paper-material>
</section>

<section data-route="about">
  <paper-material elevation="1">
    <h2 class="page-title">About</h2>
    <p>About Section</p>
  </paper-material>
</section>

Same as before, I copied the existing section and replaced the data-route value with the same value on the anchor above, 'about'. But when I click the About link on the left panel, there are two noticeable different behaviors:

• Page seems to do a full load: When I click the about link, the browser url becomes localhost:5000/about, while when I click users, it becomes localhost:5000/#!/users
• Nothing renders on the main content section: I think it's related to previous error, but trying to hit localhost:5000/#!/about still doesn't show anything.

Other than that I haven't touched anything. Is there any other place where I should set something? On the polymer videos that seemed to be it.

Answer 1

Update your page.js routes (probably located at /elements/routing.html). See the polymer-starter-kit:

page('/about', scrollToTop, function() {
  app.route = 'about';
});