nextJS路由

最新推荐文章于 2025-07-10 01:39:37 发布

原创最新推荐文章于 2025-07-10 01:39:37 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

react学习专栏收录该内容

12 篇文章

订阅专栏

博客主要介绍了Next.js中pages目录下的页面跳转方式，包括Link跳转、Router跳转，还提及获取路由参数和路由映射。路由映射可使地址栏更美观，但刷新页面会报404，原因是服务器查找时目录不匹配，可在Koa里配置解决，非Koa后台服务器不建议做路由映射。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

路由的生命周期钩子

后续再补…