1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

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
This commit is contained in:
Naoyuki Kanezawa 2016-11-04 17:05:03 +09:00 committed by Guillermo Rauch
parent e775721f34
commit d1a0309af9
3 changed files with 28 additions and 8 deletions

View file

@ -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

View file

@ -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

View file

@ -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)