-- 获取的响应数据对象Fetch (只存在于客户端)
-err- 渲染时发生错误抛出的错误对象
译者注：
基于在服务器端和客户端的不同表现，例如req的存在与否，可以通过此来区分服务器端和客户端 。
路由
可以通过组件来实现客户端在两个路由间的切换功能，例如下面两个页面：
// pages/index.jsimport Link from 'next/link'export default () =>

// pages/about.jsexport default () => Welcome to About!

注意：可以使用来让页面在后台同时获取和预加载，以获得最佳的页面加载性能
客户端路由行为与浏览器完全相同：
获取组件如果组件定义了，那么进行数据的获取，如果抛出异常，则将渲染.js在步骤1和步骤2完成后，开始执行，接着新组件将会被渲染
每一个顶层组件都会接收到一个url属性，其包括了以下API:
push以及的第二个参数as提供了额外的配置项，当你在服务器上配置了自定义路由的话，那么此参数就会发挥作用 。
译者注1：
上面那句话的意思是，as可以根据服务器端路由的配置作出相应的 路由改变，例如，在服务器端，你自定义规定当获取/a的path请求的时候，返回一个位于/b目录下的页面，则为了配合服务器端的这种指定，你可以这么定义组件：a 。
这种做法有一个好处，那就是尽管你将/a请求指定到了/b页面，但是因为as的值为/a，所以编译后的DOM元素显示的链接的href值为/a，但是当真正点击链接时，响应的真正页面还是/b
译者注2：
组件主要用于路由跳转功能，其可以接收一个必须的子元素(DOM标签或者纯文字等)
1. 如果添加的子元素是DOM元素，则Link会为此子元素赋予路由跳转功能；
2. 如果添加的元素是纯文字，则默认转化为a标签，包裹在此文字外部(即作为文字的父元素)，如果当前组件有jsx属性的scope CSS，这个a标签是不会受此scope CSS影响的，也就是说，不会加上以jsx开头的类名 。
需要注意的是，直接添加纯文字作为子元素的做法如今已经不被赞成了() 。
URL 对象
组件可以接收一个URL对象，此URL对象将会被自动格式化为URL字符串 。
// pages/index.jsimport Link from 'next/link'export default () =>

Click{' '} here {' '} to read more

上述代码中组件的将会根据href属性的对象值生成一个/about?name=Zeit的URL字符串，你也可以在此URL对象中使用任何已经在Node.js URL中定义好了的属性来配置路由 。
替换 ()而非追加(push)路由url
组件默认将新的URL追加 (push)到路由栈中，但你可以使用属性来避免此追加动作(直接替换掉当前路由) 。
// pages/index.jsimport Link from 'next/link'export default () =>

Click{' '} here {' '} to read more

让组件支持事件
anythat. In case you don’tantag, it will only addand won’t pass .
标签支持所有支持事件的组件(即只要某组件或者元素标签支持事件，则就能够为其提供跳转路由的功能) 。如果你没有给标签添加一个标签的子元素的话，那么它只会执行给定的事件，而不是执行跳转路由的动作 。
// pages/index.jsimport Link from 'next/link'export default () =>Click{' '} "/static/image.png" />
将的href暴露给其子元素(child)
如果的子元素是一个标签并且没有指定href属性的话，那么我们会自动指定此属性(与的herf相同)以避免重复工作，然而有时候，你可能想要通过一个被包裹在某个容器(例如组件)内的标签来实现跳转功能，但是Link并不认为那是一个超链接，因此，就不会把它的href属性传递给子元素，为了避免此问题，你应该给Link附加一个属性，强制让Link将其href属性传递给它的子元素 。
import Link from 'next/link'import Unexpected_A from 'third-library'export default ({ href, name }) => {name}
命令式路由
你可以使用next/来实现客户端侧的页面切换
import Router from 'next/router'export default () =>Click () => Router.push('/about')}>here to read more
上述代码中的对象拥有以下API：
push以及的第二个参数as提供了额外的配置项，当你在服务器上配置了自定义路由的话，那么此参数就会发挥作用 。
为了使用编程的方式而不是触发导航和组件获取的方式来切换路由，可以在组件内部使用props.url.push和props.url.
译者注：
除非特殊需要，否则在组件内部不赞成()使用props.url.push和props.url.，而是建议使用next/的相关API 。
URL 对象
命令式路由 (next/)所接收的URL对象与的URL对象很类似，你可以使用相同的方式来push和路由URL
import Router from 'next/router'const handler = () => Router.push({ pathname: '/about', query: { name: 'Zeit' } }) export default () =>Click here to read more
命令式路由 (next/)的URL对象的属性及其参数的使用方法和组件的完全一样 。
路由事件
你还可以监听到与相关的一些事件 。
以下是你所能够监听的事件:
the URL shown in the . If you .push(url, as)(or ), then the valuebeas.
上面API中的url参数指的是浏览器地址栏显示的链接地址，如果你使用.push(url, as)(或者类似的方法)来改变路由，则此值就将是as的值
下面是一段如何正确地监听路由事件的示例代码：
Router.onRouteChangeStart = url => {console.log('App is changing to: ', url)}
如果你不想继续监听此事件了，那么你也可以很轻松地卸载掉此监听事件，就像下面这样：
Router.onRouteChangeStart = null
如果某个路由加载被取消掉了(例如连续快速地单击两个链接)，将会被执行 。此方法的第一个参数err对象中将包括一个值为true的属性 。
Router.onRouteChangeError = (err, url) => {if (err.cancelled) {console.log(`Route to ${url} was cancelled!`)}}
如果你在一次项目新部署的过程中改变了路由，那么我们就无法在客户端对应用进行导航，必须要进行一次完整的导航动作(译者注：意思是无法像正常那样通过PWA的方式进行导航)，我们已经自动帮你做了这些事 。
不过，你也可以通过Route.事件对此进行自定义操作，就像下面这样：
Router.onAppUpdated = nextUrl => {// persist the local statelocation.href = http://www.kingceram.com/post/nextUrl}
译者注：
一般情况下，上述路由事件的发生顺序如下：
1.
2.
3.
浅层路由
浅层路由( )允许你在不触发的情况下改变路由(URL)，你可以通过要加载页面的url来获取更新后的和query，这样就不会丢失路由状态(state)了 。
你可以通过调用.push或.，并给它们加上: true的配置参数来实现此功能，下面是一个使用示例：
// Current URL is "/"const href = http://www.kingceram.com/post/'/?counter=10'const as = hrefRouter.push(href, as, { shallow: true })
现在，URL已经被更新到了/?=10，你可以在组件内部通过this.props.url来获取此URL
你可以在Props钩子函数中获取到URL的变化，就像下面这样：
componentWillReceiveProps(nextProps) {const { pathname, query } = nextProps.url// fetch data based on the new query}
注意:
浅层路由只会在某些页面上起作用，例如，我们可以假定存在另外一个名为about的页面，然后执行下面这行代码：
Router.push('/about?counter=10', '/about?counter=10', { shallow: true })
因为这是一个新的页面(/about?=10)，所以即使我们已经声明了只执行浅层路由，但当前页面仍然会被卸载掉()，然后加载这个新的页面并调用方法
使用高阶函数 HOC

文章插图
如果你想在应用的任何组件都能获取到对象，那么你可以使用高阶函数，下面是一个使用此高阶函数的示例：
import { withRouter } from 'next/router'const ActiveLink = ({ children, router, href }) => { const style = { marginRight: 10, color: router.pathname === href? 'red' : 'black' } const handleClick = (e) => { e.preventDefault() router.push(href) } return ({children}) } export default withRouter(ActiveLink)
上述代码中的对象拥有和next/相同的API 。
预获取页面Pages
(下面就是一个小例子)
Next.js自带允许你预获取()页面的API
因为Next.js在服务器端渲染页面，所以应用的所有将来可能发生交互的相关链接路径可以在瞬间完成交互，事实上Next.js可以通过预下载功能来达到一个绝佳的加载性能 。[更多详细可见](Read more.)
由于Next.js只会预加载JS代码，所以在页面加载的时候，你可以还需要花点时间来等待数据的获取 。
通过组件
你可以为任何一个组件添加属性，Next.js将会在后台预加载这些页面 。
import Link from 'next/link'// example header componentexport default () =>

• Home
• About
• Contact

通过命令的方式
大部分预获取功能都需要通过组件来指定链接地址，但是我们还暴露了一个命令式的API以方便更加复杂的场景：
import Router from 'next/router'export default ({ url }) =>() => setTimeout(() => url.pushTo('/dynamic'), 100)}> A route transition will happen after 100ms {// but we can prefetch it! Router.prefetch('/dynamic')}