Add support for URL objects in Link and Router

lib/link.js

@@ -1,4 +1,4 @@
-import { resolve } from 'url'
+import { resolve, format } 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,7 +102,7 @@ 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)

lib/router/router.js

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

readme.md

@@ -270,6 +270,24 @@ 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 the following parameters:
+
+- `pathname` - `String` of the link path excluding the query string. If it doesn't start with `/` is automatically added
+- `query` - `Object` with the parsed query string. Optional, if you set `search` this is ignored
+- `hash` - `String` with the fragment to be used after a `#` character. Optional, if it doesn't start with `#` is automatically added
+- `search` - `String` with the stringified query. Optional, if it doesn't start with `?` is automatically added
+
 #### Imperatively
 
 <p><details>
@@ -302,6 +320,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.