Fixes issue #8 by adding a globalHash property to the Link component

Author: mitchelkuijpers

docs/contextual.md

@@ -57,7 +57,7 @@ prefixes.
 ### Navigate outside of the router's context
 
 Sometimes you want to navigate outside of the router's context. You can do this
-with `Link` component by creating it with a `global` boolean property:
+with `Link` component by creating it with a `global` boolean property, if you are only using `hash` routes use the `globalHash` property:
 
     <Link global href="/">Home</Link>
 

lib/Link.js

@@ -18,7 +18,8 @@ var Link = React.createClass({
 
   propTypes: {
     href: React.PropTypes.string.isRequired,
-    global: React.PropTypes.bool
+    global: React.PropTypes.bool,
+    globalHash: React.PropTypes.bool
   },
 
   onClick: function(e) {
@@ -40,6 +41,10 @@ var Link = React.createClass({
   },
 
   _navigate: function(path, cb) {
+    if(this.props.globalHash) {
+      return Environment.hashEnvironment.navigate(path, cb);
+    }
+
     return this.props.global ?
       Environment.defaultEnvironment.navigate(path, cb) :
       this.navigate(path, cb);

tests/browser.js

@@ -504,19 +504,19 @@ describe('Hash routing', function() {
 
     render: function() {
       return Router.Locations({ref: 'router', hash: true, className: 'App'},
-        Router.Location({
-          path: '/',
-          handler: function(props) {
-            return Router.Link({ref: 'link', href: '/hello'}, 'mainpage')
-          }
-        }),
-        Router.Location({
-          path: '/:slug',
-          handler: function(props) {
-            return div(null, props.slug);
-          }
-        })
-      );
+                              Router.Location({
+                                path: '/',
+                                handler: function(props) {
+                                  return Router.Link({ref: 'link', href: '/hello'}, 'mainpage');
+                                }
+                              }),
+                              Router.Location({
+                                path: '/:slug',
+                                handler: function(props) {
+                                  return div(null, props.slug);
+                                }
+                              })
+                             );
     }
   });
 
@@ -571,3 +571,64 @@ describe('Hash routing', function() {
   });
 
 });
+
+describe('Contextual Hash routers', function() {
+
+  var SubCat = React.createClass({
+
+    render: function() {
+      return React.DOM.div(null,
+        Router.Locations({ref: 'router', contextual: true},
+          Router.Location({
+            path: '/',
+            handler: function(props) { return div(null, 'subcat/root') }
+          }),
+          Router.Location({
+            path: '/escape',
+            handler: function(props) {
+              return Router.Link({globalHash: true, ref: 'link', href: '/'}, 'subcat/escape');
+            }
+          })
+        ));
+    }
+  });
+
+  var App = React.createClass({
+
+    render: function() {
+      return Router.Locations({ref: 'router', hash: true},
+        Router.Location({
+          path: '/',
+          handler: function() {
+            return div(null, "mainpage");
+          }
+        }),
+        Router.Location({
+          path: '/subcat/*',
+          handler: SubCat,
+          ref: 'subcat'
+        })
+      );
+    }
+  });
+
+  beforeEach(setUp(App));
+  afterEach(cleanUp);
+
+  describe('Link component', function() {
+
+    it('does not scope globalHash Link to a current context', function(done) {
+      assertRendered('mainpage');
+      router.navigate('/subcat/escape', function() {
+        assertRendered('subcat/escape');
+        clickOn(router.refs.subcat.refs.router.refs.link);
+        setTimeout(function() {
+          assertRendered('mainpage');
+          done();
+        }, 200);
+      });
+    });
+
+  });
+
+});