Add pathname and query to the argument of getInitialProps (#194)

* pass pathname and query to getInitialProps on both server and client

* README: describe about the contet object of getInitialProps

README.md

@@ -128,6 +128,15 @@ export default class extends React.Component {
 
 Notice that to load data when the page loads, we use `getInitialProps` which is an [`async`](https://zeit.co/blog/async-and-await) static method. It can asynchronously fetch anything that resolves to a JavaScript plain `Object`, which populates `props`.
 
+`getInitialProps` receives a context object with the following properties:
+
+- `pathname` - path section of URL
+- `query` - query string section of URL parsed as an object
+- `req` - HTTP request object (server only)
+- `res` - HTTP response object (server only)
+- `xhr` - XMLHttpRequest object (client only)
+- `err` - Error object if any error is encountered during the rendering
+
 ### Routing
 
 Client-side transitions between routes are enabled via a `<Link>` component

lib/router.js

@@ -26,14 +26,16 @@ export default class Router {
   onPopState (e) {
     this.abortComponentLoad()
 
-    const route = (e.state || {}).route || toRoute(window.location.pathname)
+    const { pathname, query } = parse(window.location.href)
+    const route = (e.state || {}).route || toRoute(pathname)
 
     Promise.resolve()
     .then(async () => {
       const data = await this.fetchComponent(route)
       let props
       if (route !== this.route) {
-        props = await this.getInitialProps(data.Component, data.ctx)
+        const ctx = { ...data.ctx, pathname, query }
+        props = await this.getInitialProps(data.Component, ctx)
       }
 
       this.route = route
@@ -64,12 +66,15 @@ export default class Router {
 
     if (route !== this.route) return
 
+    const { pathname, query } = parse(window.location.href)
+
     let data
     let props
     try {
       data = await this.fetchComponent(route)
       if (route === this.route) {
-        props = await this.getInitialProps(data.Component, data.ctx)
+        const ctx = { ...data.ctx, pathname, query }
+        props = await this.getInitialProps(data.Component, ctx)
       }
     } catch (err) {
       if (err.cancelled) return false
@@ -92,7 +97,9 @@ export default class Router {
   }
 
   async change (method, route, url) {
-    if (!route) route = toRoute(parse(url).pathname)
+    const { pathname, query } = parse(url, true)
+
+    if (!route) route = toRoute(pathname)
 
     this.abortComponentLoad()
 
@@ -101,7 +108,8 @@ export default class Router {
     try {
       data = await this.fetchComponent(route)
       if (route !== this.route) {
-        props = await this.getInitialProps(data.Component, data.ctx)
+        const ctx = { ...data.ctx, pathname, query }
+        props = await this.getInitialProps(data.Component, ctx)
       }
     } catch (err) {
       if (err.cancelled) return false

server/index.js

@@ -70,7 +70,8 @@ export default class Server {
 
   async render (req, res) {
     const { dir, dev } = this
-    const ctx = { req, res }
+    const { pathname, query } = parse(req.url, true)
+    const ctx = { req, res, pathname, query }
     const opts = { dir, dev }
 
     let html
@@ -142,6 +143,8 @@ export default class Server {
 
   async render404 (req, res) {
     const { dir, dev } = this
+    const { pathname, query } = parse(req.url, true)
+    const ctx = { req, res, pathname, query }
     const opts = { dir, dev }
 
     let html
@@ -149,10 +152,10 @@ export default class Server {
     const err = this.getCompilationError('/_error')
     if (err) {
       res.statusCode = 500
-      html = await render('/_error-debug', { req, res, err }, opts)
+      html = await render('/_error-debug', { ...ctx, err }, opts)
     } else {
       res.statusCode = 404
-      html = await render('/_error', { req, res }, opts)
+      html = await render('/_error', ctx, opts)
     }
 
     sendHTML(res, html)