Encounter 404 error when reload page in Polymer

Question

It is working when I click every links of my project and go to each pages but I don't know why I got 404 error when I reload page in polymer. Please help me what I'm missing to add.

Here is my app-location, app-route and iron-pages.

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<iron-pages selected="[[page]]" attr-for-selected="name">
  <good-article name="article" route="{{subroute}}"></good-article>
  <good-detail name="detail" route="{{subroute}}"></good-detail>
  <good-login name="login" route="{{subroute}}"></good-login>
  <good-form name="form" route="{{subroute}}"></good-form>
  <good-list name="list" route="{{subroute}}"></good-list>
  <good-404 name="404"></good-404>
</iron-pages>

here is script tag.

<script>
Polymer({
  is: 'good-app',

  properties: {
    page: {
      type: String,
      reflectToAttribute: true,
      observer: '_pageChanged',
    },
  },

  observers: [
    '_routePageChanged(routeData.page)',
  ],

  _routePageChanged: function(page) {
    this.page = page || 'article';
  },

  _pageChanged: function(page) {
    // Load page import on demand. Show 404 page if fails
    var resolvedPageUrl = this.resolveUrl('good-' + page + '.html');
    this.importHref(resolvedPageUrl, null, this._showPage404, true);
  },

  _showPage404: function() {
    this.page = '404';
  },
});
</script>

Deividas Karzinauskas Deividas Karzinauskas · Accepted Answer · 2017-03-01T07:11:36

This is likely caused by server not rerouting all urls to the index.html file. Since your app manages routes with javascript, server does not know where to redirect when it get urls other than index.html. Therefore you should configure your server (I assume .htaccess if it's an Apache server) to reroute all urls to index.html so the app can handle them.

Encounter 404 error when reload page in Polymer

2 Answers