前言
本文将会介绍next.js的路由相关内容，作为一个新手，笔者自知文章并没有太多深层次的东西，只希望帮助到跟笔者一样的入门级小伙伴。本文基础为上一篇
next.js目录结构
在介绍路由之前，想先简单说一下目录结构，其中有些东西对于路由讲解还是很有帮助的
├── .next│ ├── build-manifest.json│ ├── react-loadable-manifest.json│ ├── server│ └── static├── components│ ├── head.js│ └── nav.js├── pages│ ├── _app.js│ └── index.js├── static│ └── favicon.ico├── server.js├── .babelrc├── .gitignore├── next.config.js├── package.json├── README.md└── yarn.lock复制代码
这是一文中创建的next+koa2+antd的文件目录，其中的
README.md,package.json,yarn.lock,.gitignore就不说了。
pages和components pages是next.js中非常重要的一个目录，其中每一个js文件就代表一个页面，但是有两个例外，一个是上一篇文章中用到的_app.js,一个是_document.js。我们在pages下再创建一个a.js和test/b.js，然后看看效果
// a.jsexport default () =>this is a page// test/b.jsexport default () =>this is b page复制代码
但是我们再写页面的时候不可能将所有东西都放在pages下，我们可以将具体内容作为组件放在components目录中，然后在pages中相应的js文件中引入。如果是用脚手架工具生成项目的小伙伴可以很直观的看到components目录中有head.js和nav.js两个组件，在pages/indx.js中将其引入并使用
.next: 在我们运行过next.js项目之后，会自动生成.next目录，这里存放的内容是next.js将我们写的pages和components等源码打包编译后的结果，我们通过浏览器访问可以拿到的内容其实就来自这里，在后续进行上限打包时候也会生成这个目录.
Tips:请不要修改这个目录中的内容
其他 staic目录存放静态文件，比如图片,css,favicon.ico等 .babelrc文件存放babel配置 next.config.js存放next的配置 server.js是我们上一篇写Koa服务器程序的代码
next.js路由
Link组件
我们可以删除index.js中的所有内容，重写为:
import Link from 'next/link' //引入Link组件import { Button } from 'antd' //引入antd中的Button组件export default () => { return ( )}复制代码 这里我们引入Link组件并将Button包裹在Link组件中,Link的href属性可以让我们选择跳转到的路由，这里我们/a是跳转到我们上文中创建的a.js对应的页面
值得说明的是，Link的机制并不是在Button上增加了a标签实现的跳转，而是对其中的组件添加了click事件，然后在浏览器中创建一个路由，在最终渲染的结果上并不会对Button包裹任何元素，我们也可以看到点击Button页面也不会有刷新的情况。
React.Children.only规定了它所包含的元素只能有一个，如果我们再并列Button写一个标签就会报错 //报错复制代码
如果我们有这种需求,可以将两个Button包裹在<div>中
复制代码
此时点击两个按钮都会跳转到a页面，(知道事件冒泡的小伙伴可能对为什么都能跳转到a页面，不清楚的小伙伴可以去查查事件冒泡和捕获)
next.js中的Router对象
next.js为我们提供的并不只是
Link组件，它还为我们提供了Router的方式 Tips: 这里的Router不是一个组件而是一个路由对象，Link的实现原理也是基于Router对象
我们先来看看代码:
import Link from 'next/link'import Router from 'next/router' // 新引入进来的import { Button } from 'antd'export default () => { const goToB = () => { Router.push('/test/b') } return ( <> // 新增的一个Button组件 )}复制代码 我们可以看到新增了一个Button组件，它有一个goToB的onClick事件，点击之后会执行goToB函数。goToB做了什么呢？它给Router添加了一个路由/test/b对应我们之前/test/b.js渲染的内容,此时我们就可以跳转到B页面了，是不是很简单。
动态路由
在next.js中，无法通过
/test/:id这种参数路由的方式获取到参数，它只能通过query的方式获取参数，即/test?id=xx的方式
写法：
复制代码
使用Router的方式也可以通过问号这种形式来写，不过还可以通过给Router.push()传递一个对象来写
const goToB = () => { Router.push({ pathname: '/test/b', query: { id: 2 } })}复制代码 此时对应a页面的内容要获得传递过来的id=1，就得稍微改写一下：
import { withRouter } from 'next/router' //新引入的const A = ({ router }) => this is a page,参数是{router.query.id} export default withRouter(A)复制代码 我们引入了withRouter组件，它是一个高阶组件(HOC),即参数为被包裹的组件，返回值也是一个组件（不了解的小伙伴可以去看看react文档中高阶组件的部分）。
我们这里不直接导出A组件了，而是导出withRouter包裹后的组件，并且给A组件传入了router参数，通过router.query.id获取传递过来的id。 我们可以看看效果
路由映射
上面说过next.js中没有参数路由，只能通过
/test?id=xxx来传递参数，但是我们就是想用参数路由怎么办，虽然我们做不到，但是可以模拟一下，通过/test/xxx来传递参数
写法:
复制代码
Router.push()的写法:
Router.push({ pathname: '/test/b', query: { id: 2 }}, '/test/b/2')复制代码 达到的效果是一样的
请注意 我们将http://localhost:3000/a/1复制在新标签页打开，会出现404
为什么会出现这种情况？ 有没有小伙伴记得上文提到过，上文中说过一句话然后在浏览器中创建一个路由
此处不知道有没有小伙伴会问：既然next.js路由跳转都是在本地浏览器创建的路由,那为什么通过Button点击进入的localhost:3000/a复制之后在新标签页打开却是正常的？这是因为服务器端我们确实存在pages/a.js啊，此处刚好浏览器端认识/a路由，但是/a/1加上id后浏览器端就没定义过这个pages/a/1.js文件，所以什么都匹配不到
那这种情况该怎么处理，请不要担心，我们安装的koa会提供全面的路由，我们只需要做个路由映射就好了，使用express或者egg.js也是同样的道理。
首先我们执行npm install koa-router --save或者yarn add koa-router（笔者使用的是yarn）安装koa路由中间件 在server.js中引入并使用
/** @Author: yishuai* @Date: 2019-04-21 09:57:53* @Last Modified by: yishuai* @Last Modified time: 2019-04-21 12:22:22*/const Koa = require('koa')const Router = require('koa-router') // 引入路由const next = require('next')const dev = process.env.NODE_ENV !== 'production'const app = next({ dev })const handle = app.getRequestHandler()app.prepare().then(() => { const server = new Koa() const router = new Router() // 定义路由 // 设置路由，与next.js的路由进行映射 router.get('/a:id', async (ctx) => { // handle传入的第三个参数跟我们next.js中用Router.push({})传入的数组一样 await handle(ctx.req, ctx.res, { pathname: '/a', query: { id } }) ctx.respond = false })// 使用路由 server.use(router.routes()) server.use(async (ctx, next) => { await handle(ctx.req, ctx.res) ctx.respond = false }) server.listen(3000, () => { console.log('server is running at http://localhost:3000') })})复制代码 具体映射方式在上方代码的注释中，就不详细说了不熟悉koa的小伙伴去看看koa的文档，了解一下koa路由的使用。 然后打开浏览器新建页面重新输入localhost:3000/a/1就可以正常访问了
next.js中的路由钩子
这里说的钩子，相信大多数了解过react或vue生命周期的小伙伴都知道生命周期钩子，这些钩子函数在一定条件下会自动执行，我们如果在某些生命周期过程中有自定义的需求，可以借助生命钩子函数来完成。比如react中的
componentDidMount(){xxxxxx}可以在组件加载完成后做xxxxxxxx事情，比如当组件加载完成后我们要验证用户是不是登录了，就可以把xxxxxxx替换成我们的验证逻辑。这里的路由钩子也是一样的道理，当路由被触发的时候就会在路由跳转前，跳转后等时间节点自动执行一些函数，这些函数就是路由钩子
我在index.js中添加了(不是重写index.js)这样一段代码：
// 所有的路由钩子名称，写在了一个数组中const events = [ 'routeChangeStart', 'routeChangeComplete', 'routeChnageError', 'beforeHistoryChange', 'hashChangeStart', 'hashChangeComplete']// 通过一个高阶函数在钩子触发后执行自定义的逻辑，这里直接输出了钩子名称和钩子函数的参数function makeEvent(type) { return (...args) => { console.log(type, ...args) }}//通过forEach遍历 绑定钩子事件events.forEach(event => { Router.events.on(event, makeEvent(event))})复制代码 上面注释中说明了一些情况，我们可以通过events名称直观地看到next的钩子总共有六种分别是：路又开始时候，路由完成时候，路由出错时候，路由历史更改之前，哈希路由开始时候，哈希留有完成时候这6个时间节点会触发相应的路由钩子。
中间用了一个高阶函数，可能有些小伙伴会有点看不懂，这里简单介绍一下:
高阶函数简单讲就是一个函数作为另一个函数的参数，或者一个函数作为另一个函数的返回值。
如果说我们只想绑定routeChangeStart事件，则可以这样写,当触发routeChangeStart时候，输出一个内容。
Router.events.on('routeChangeStart', function(...args){ console.log('routeChangeStart',...args)})复制代码 我们这里为了方便使用了forEach循环了上述代码，传递的Router.events.on()第二个参数要接收一个函数，我们就可以利用高阶函数，执行高阶函数后刚好返回一个函数，就用来做它的第二个参数，相信到这里再看上面的代码就清晰很多了。
我们绑定了所有的钩子，可以去看看效果:点击跳转到A按钮，输出以下内容
routeChangeStart钩子，输出routeChangeStart，以及对应 ...args参数，然后此时浏览器的路由历史会发生改变，因为跳转后前一个历史就是我们的 localhost:3000这个页面，在历史发生改变的前一刻触发 beforeHistoryChange,然后路由进行跳转，结束后触发 routeChangeComplete路由更改完成的钩子。 hash路由也是一样的：相对来说hash路由在本页跳转不会更改历史，所以我们将会看到这样的效果
import { withRouter } from 'next/router'import Link from 'next/link' // 新引入的// 外层加了个a标签和Link标签，Link标签跳转到hash路由#helloconst A = ({ router }) => this is a page,参数是{router.query.id} export default withRouter(A)复制代码 结束
好了，到此next.js的路由我们就有了一定的认识。感谢小伙伴坚持到最后。
next.js的路由相对后端框架或者是react-router都要简单很多，本质上就只是pages路径下对应的js文件的目录和文件名称直接作为路由，然后就是支持了query传递参数，路由跳转是在本地浏览器上操作的，所以如果不借助外力，可能会有404错误，因此要借助后端框架实现路由映射，最后我们提到了路由钩子。希望这篇文章对小伙伴们有用，感谢阅读。