Add support for URL objects in Link and Router

lib/link.js

@@ -1,4 +1,4 @@
-import { resolve } from 'url'
+import { resolve, format, parse } from 'url'
 import React, { Component, Children, PropTypes } from 'react'
 import Router from './router'
 import { warn, execOnce, getLocationOrigin } from './utils'
@@ -39,6 +39,11 @@ export default class Link extends Component {
       return
     }
 
+    if (href && typeof href === 'object') {
+      // format href object to generate url
+      href = format(href)
+    }
+
     const { pathname } = window.location
     href = resolve(pathname, href)
     as = as ? resolve(pathname, as) : href
@@ -83,7 +88,7 @@ export default class Link extends Component {
   }
 
   render () {
-    let { children } = this.props
+    let { children, as, href } = this.props
     // Deprecated. Warning shown by propType check. If the childen provided is a string (<Link>example</Link>) we wrap it in an <a> tag
     if (typeof children === 'string') {
       children = <a>{children}</a>
@@ -97,17 +102,18 @@ export default class Link extends Component {
 
     // If child is an <a> tag and doesn't have a href attribute we specify it so that repetition is not needed by the user
     if (child.type === 'a' && !('href' in child.props)) {
-      props.href = this.props.as || this.props.href
+      props.href = as || (href && typeof href === 'object' ? format(href) : href)
     }
 
     return React.cloneElement(child, props)
   }
 }
 
 function isLocal (href) {
-  const origin = getLocationOrigin()
-  return !/^(https?:)?\/\//.test(href) ||
-    origin === href.substr(0, origin.length)
+  const url = parse(href, false, true)
+  const origin = parse(getLocationOrigin(), false, true)
+  return (!url.host || !url.hostname) ||
+    (origin.host === url.host || origin.hostname === url.hostname)
 }
 
 const warnLink = execOnce(warn)

lib/router/router.js

@@ -121,11 +121,13 @@ export default class Router extends EventEmitter {
   }
 
   push (url, as = url, options = {}) {
-    return this.change('pushState', url, as, options)
+    const formattedUrl = typeof url === 'object' ? format(url) : url
+    return this.change('pushState', formattedUrl, as === url ? formattedUrl : as, options)
   }
 
   replace (url, as = url, options = {}) {
-    return this.change('replaceState', url, as, options)
+    const formattedUrl = typeof url === 'object' ? format(url) : url
+    return this.change('replaceState', formattedUrl, as === url ? formattedUrl : as, options)
   }
 
   async change (method, url, as, options) {

readme.md

@@ -271,6 +271,19 @@ Each top-level component receives a `url` property with the following API:
 
 The second `as` parameter for `push` and `replace` is an optional _decoration_ of the URL. Useful if you configured custom routes on the server.
 
+##### With URL object
+The component `<Link>` can also receive an URL object and it will automatically format it to create the URL string.
+
+```jsx
+// pages/index.js
+import Link from 'next/link'
+export default () => (
+  <div>Click <Link href={{ pathname: 'about', query: { name: 'Zeit' }}}<a>here</a></Link> to read more</div>
+)
+```
+
+That will generate the URL string `/about?name=Zeit`, you can use every property as defined in the [Node.js URL module documentation](https://nodejs.org/api/url.html#url_url_strings_and_url_objects).
+
 #### Imperatively
 
 <p><details>
@@ -303,6 +316,24 @@ The second `as` parameter for `push` and `replace` is an optional _decoration_ o
 
 _Note: in order to programmatically change the route without triggering navigation and component-fetching, use `props.url.push` and `props.url.replace` within a component_
 
+##### With URL object
+You can use an URL object the same way you use it in a `<Link>` component to `push` and `replace` an url.
+
+```jsx
+import Router from 'next/router'
+
+const handler = () => Router.push({
+  pathname: 'about',
+  query: { name: 'Zeit' }
+})
+
+export default () => (
+  <div>Click <span onClick={handler}>here</span> to read more</div>
+)
+```
+
+This uses of the same exact parameters as in the `<Link>` component.
+
 ##### Router Events
 
 You can also listen to different events happening inside the Router.