Backbone Router + RewriteRule not triggering route with a “/”

I convert all links from example.com/action to example.com/index.html#action which is then parsed by my Backbone router.

我将所有链接从example.com/action转换为example.com/index.html#action，然后由我的Backbone路由器解析。

However, my new page, signup/:inviteAuthHash (eg. signup/9d519a2005b3dac8802d8e9e416239a1) is not working; the only thing that renders is my index.html, and none of my breakpoints in my router are met.

但是，我的新页面，注册/：inviteAuthHash（例如，注册/ 9d519a2005b3dac8802d8e9e416239a1）无效;渲染的唯一东西是我的index.html，我的路由器中没有遇到任何断点。

.htaccess:

的.htaccess：

# not a file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# example.com/home => example.com/index.html#home
RewriteRule ^(.+)$ index.html#$1 [L,QSA]

router.js

var AppRouter = Backbone.Router.extend( {
    routes : {
        /* PAGES */
        // beta
        'request_invite' : 'request_invite',
        'signup/:inviteAuthHash' : 'signup',

        // Default
        '*actions' : 'defaultAction'
    },

    /* PAGES */
    // eta
    request_invite : function() {
        new BetaLayout;
        new RequestInviteView;
    },
    signup : function(inviteAuthHash) {
        // validate auth hash
        if(!InviteRequest.isValidInviteAuthHash(inviteAuthHash))
            return this.defaultAction();
        else {
            new BetaLayout;
            new SignupView(SignupView);
        }
    },

    // Default
    defaultAction : function(actions) {
        app_router.navigate('request_invite');
        this.request_invite();
    }
});

var initialize = function() {
    app_router = new AppRouter;

    $('a').live('click', function() {
        var href = $(this).attr('href');

        // only navigate to real links
        if(href == undefined)
            return;

        // open in new window?
        if($(this).prop('target') == '_blank')
            return true;

        app_router.navigate(href, {trigger: true});

        return false;
    });

    Backbone.history.start({pushState: true});
};
return {
    initialize : initialize
};

2 个解决方案

#1

Can you try this .htaccess instead:

你可以尝试这个.htaccess：

# not a file or directory
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
# example.com/home => example.com/index.html#home
RewriteRule (?!^index\.html)^(.+)$ /index.html#$1 [L,NC,R,NE]

#2

I think there is another, in my opinion better solution to your problem: the use of pushState.

我认为还有另一个，在我看来更好地解决您的问题：使用pushState。

So what you do is

所以你做的是

change your server configuration so that all urls under example.com except your assets actually render index.html (my apache knowledge is rusty, but that should not be hard to do).
更改您的服务器配置，以便除了您的资产以外，example.com下的所有URL实际呈现index.html（我的apache知识生锈，但这应该不难）。
change your call to Backbone.history.start to enable pushstate, and specify the root, Backbone.history.start({pushState: true, root: "/"}), see Backbone documentation
将您的调用更改为Backbone.history.start以启用pushstate，并指定root，Backbone.history.start（{pushState：true，root：“/”}），请参阅Backbone文档

On browsers that support pushstate, the url will display as it should and everything works, on older browsers backbone will automatically convert it to a url with a hash.

在支持pushstate的浏览器上，url将按原样显示并且一切正常，在较旧的浏览器上，骨干网会自动将其转换为带有哈希的url。

#1