search

millermedeiros / crossroads.js

JavaScript Routes
http://millermedeiros.github.com/crossroads.js/
1.44k stars 156 forks source link

Routing on Page Load #89

Closed damonbauer closed 11 years ago

damonbauer commented 11 years ago

This is a question, not a bug.

What is the standard for routing on page load? If I type .com/about/ , I'd like to be routed to .com/#!/about/.

I've got this working on link click by parsing the href, but I'm not sure about how to do this on page load. Does this need to be configured at the server level?

millermedeiros commented 11 years ago

you can use some RegExp + window.location.replace to redirect to the hashbang:

(function(){
    // redirect if coming from direct link
    var match = /example\.com\/([^?#]+)$/.exec(window.location.href);
    if (match) {
        window.location.replace('http://example.com/#!/'+ match[1]);
    }
}());

I would add this code on the HTML page itself inside the <head> before any other JS is loaded, so it's executed as soon as possible.

damonbauer commented 11 years ago

@millermedeiros -

Thanks for the reply. I see the concept here but it is appending /#!/... to the url rather than replacing.

I got it to work with the following, but it doesn't seem "nice" to me:

(function () {
        // redirect if coming from direct link
        var match = /example\.com\/([\w\/]+)$/.exec(window.location.href);
        console.log(match);
        if (match) {
            window.location = 'http://example/#!/' + match[1];
        }
}());
millermedeiros commented 11 years ago

yes, the first example was wrong. I was using relative paths in a wrong way.. - I copied the code from an old project that used ?_escaped_fragment_= instead of URI rewrite (I updated the code afterwards).

using window.location.replace() is better than just setting a new location since it won't keep the "http://example.com/about/" in the browser history.

I usually keep all my links with the hashbang (#!/foo) that way I don't need to highjack the links and "right click" / "open on new tab" works as expected. I generate the static fallback with the _escapedfragment for crawlers. - I know it's dirty but works well, regular users shouldn't get to the ?_escaped_fragment_ URL anyways...

damonbauer commented 11 years ago

This is great; exactly what I was looking for. Thanks for all the information!

EDIT:

I've been doing more investigating into the escaped_fragment for crawlers. You said you generate the static fallback for this, which I've read needs done. Can I ask what you did to implement this? I'm assuming some sort of server side solution was used, like a rewrite rule to look for escaped_fragment & redirect to the static page?

millermedeiros commented 11 years ago

@damonbauer yes, I usually write some simple backend solution for most projects (using Apache rewrite + PHP or anything similar) but you can also do it with something more advanced like rndr.me.

damonbauer commented 11 years ago

@millermedeiros this is awesome. I'm on ASP.NET, but this translates pretty easily. Thanks for the continued support - I really appreciate it.