Backbone js pushState gives Cannot Get Error

Question

Aware that there are a lot of questions on the same issue but none of them have worked. Have already tried setting pushState true and hashChage false but every time the route gives me Cannot Get error. Here's my routes file

var appRouter = Backbone.Router.extend({
 routes:{
    "login":"login"
 },
 login:function () {
  var LoginView = Backbone.View.extend({
      initialize: function () {
          this.render();
      },
      render: function () {
          var that = this;
          $.get('templates/login.html', function (data) {
              template = _.template(data, {});
              that.$el.html(template);
          }, 'html');
      }
   });
   var loginView = new LoginView({ el: $("#test") });
 },
});
var sys = new appRouter();
Backbone.history.start({pushState:true});

Answer 1

Do you have a link in your HTML of <a href="/login">?

Your browser is going to this URL.

You need to prevent that from happening.

Read this question and the top answer for a way to solve it.

This works great. However it throws the same error when I refresh the page or hit the URL directly. Any way to solve that?

Yes, but it will require you to make changes to the web server.

If you can add rewrite rules, you could look for URLs that don't exist and assume they are push-state generated and return your root page.

Without seeing more details of your application, it's hard to say what the best solution would be.

Answer 2

So as Adrian has suggested, it solves the problem for requests coming through clicks on <a> tags. Direct Url hit and page refresh errors can be resolved by modifying your htaccess file as suggested by Adrian. In my case I have modified the gruntfile.js file as here