html - app-router "go" is not rendering : Polymer -

i trying replace component on screen using app-router element doesn't render anything. below details.

there 2 major elements in "my-element.html". 1 side bar , other main panel. want replace main panel appropriate element based on route. however, doesn't render element modifies url.

please help

my-element.html

<dom-module id ="my-element"> <template>   <paper-drawer-panel id="drawerpanel">    <aq-sidebar></aq-sidebar>    <app-router div="app-router" mode="hash">     <app-route path="/editor" import="../layouts/editor.html"></app-route>     <app-route path="/analyze" import="../layouts/analyze.html"></app-route>     <app-route path="/community" import="../layouts/community.html"></app-route>   </app-router>   </paper-drawer-panel> </template> <script>  polymer({ is:'my-element',            listeners: {'change-menu': 'menuchanged',},            menuchanged(newmenu) { this.$$('app-router').go("/editor", {replace:true});}         }) </script> </dom-module> 

aq-sidebar.html

<dom-module id='aq-sidebar'> <template>  <paper-header-panel class='sidenav fit'>   <paper-toolbar>     <div class="title">aimsquant</div>     <paper-icon-button icon="icons:menu" on-tap="togglemenu"></paper-icon-button>   </paper-toolbar>   <paper-menu attrforselected="data-panel" iron-select="onselected">     <paper-icon-item noink  data-panel="editor">       <iron-icon item-icon icon="vaadin-icons:twin-col-select"></iron-icon>       <span class="item-text">editor</span>       <!--a is="pushstate-anchor" href="#/editor"></a-->     </paper-icon-item>      <paper-icon-item data-panel="analyze">       <iron-icon item-icon icon="vaadin-icons:chart"></iron-icon>       <span class="item-text">analyze</span>     </paper-icon-item>  <script> polymer({     is: 'aq-sidebar',      listeners: {       'iron-select': 'onselected',     },      onselected() {       this.fire('change-menu', {menu : this.menuselected})     },     });   </script> </dom-module> 

first, import style strange, think right if use iron-selector switch between view components you've made, , import using importhref function, should use set function of polymer change path instead of go function. this:

<app-location route="{{ route }}"></app-location> <app-route route="{{ route }}"            pattern="/:page"            data="{{ routedata }}"            tail="{{ subroute }}"></app-route>  <iron-pages role="main"             attr-for-selected="route"             selected="[[ page ]]">     <my-editor route="editor"></my-editor>     <my-analyze route="analyze"></my-analyze>     <my-community route="community"></my-community> </iron-pages>  <script>      polymer({           is:'my-element',          properties: {              page: {                  type: string,                  notify: true,                  reflecttoattribute: true,                  observer: "_pagechanged"              }          },           observers: [              "_routepagechanged(routedata.page)"          ],           _changeroute: function(e) {              this.importhref(                 this.resolveurl("my-" + e.detail.requestroute), null, null, true);              this.set("route.path", e.detail.requestroute);          },           _routepagechanged: function(page) {              this.page = page || "list";          },      }) </script>