nextJS路由

pages目录

// pages                    ---路由文件
//   _app.js                ---启动文件，不走路由
//   _document.js           ---宿主文件，不走路由
//   a.js                   ---可通过http://localhost:3000/a 进行访问
//   b.js                   ---可通过http://localhost:3000/b 进行访问
//   test                   ---二级路由
//     aa.js                ---可通过http://localhost:3000/test/aa 进行访问

页面跳转

1.Link跳转

import Link from 'next/link'
<Link href="/a?id=1" as="/a/1">               
	<span>点击我跳转到a页面</span>           
</Link>

2.Router跳转

import Router from 'next/router'
<Button onClick={()=>{ 
	Router.push('/test/b') 
	Router.push({
		pathname: 'test/b',
		query: {
			id: 1
		}
	},'test/b/1')                           
}}></Button>

3.获取路由里的参数

import { withRouter } from 'next/router'
const A = ({ router }) => <span>{router.query}</span>
export default withRouter(A)

4.路由映射

路由映射是什么？
我们看到的常规地址栏是这样的 http://…:3000/test/b?id=1，而路由映射可以帮我们显示成为这样 http://…:3000/test/b/1，比较美观友好
Link实现方式：

<Link href="/a?id=1" as="/a/1"><span>点击我跳转</span></Link>

Router实现方式：

Router.push({
	pathname: 'test/b',
	query: {
		id: 1
	}
},'test/b/1')  

但是，问题来了。当我们触发跳转的时候，页面可以通过http://…:3000/test/b/1找到页面。而当我们刷新，却报404了。为什么呢？因为（看下图）：当我们点击按钮的时候，是浏览器去找页面，它会通过路由映射去匹配上，所以可以找到。而刷新的时候，是服务器去找，而我们的pages页面里test/b里面没有1的目录，所以就报404了 。

针对这个问题，我们可以去Koa里去配置。如果不是用Koa的后台服务器，只靠nextjs，建议不做路由映射。

路由的生命周期钩子

后续再补…