next.js学习笔记

学习目标：

掌握next.js页面开发流程

---

学习内容：

next.js页面开发流程
1、 创建新的页面和组件
2、 路由的标签跳转和编程跳转
3、 路由跳转使用query传递参数和接收参数，6个钩子事件

---

学习产出：

next.js出现背景

VUE和React开发得到的是单一页面，存在首屏加载过慢（第一个页面将所有资源都加载过来）、不能SEO这两个问题

优点（1）搭建轻松（2）自带数据同步（3）丰富的插件，自己形成生态（4）配置灵活

项目基本结构-pages添加页面

在 Next.js 中，一个 page（页面） 就是一个从 .js、jsx、.ts 或 .tsx 文件导出（export）的 React 组件 ，这些文件存放在 pages 目录下。每个 page（页面）都使用其文件名作为路由（route）；深层次路由则通过pages中新建文件夹实现

项目基本结构-components组件

页面之间跳转

两种跳转方式：标签式跳转（Link）和编程式跳转（Router.push）

import Link form 'next/link'
import Router form 'next/router'
<Link href="/xxx"></Link>
// 注意有些版本中link中需要添加a标签
<button onClick={()=>{Router.push('./xxx'}}>

路由跳转使用query传递参数

netx.js只支持query传递参数

// pages/index.js
function goTo (){
    Router.push({
        pathname: './pageA',
        query:{
           name: 'pagea'
        }
    })
}

<div>
   <Link href={{pathname:'./pageA', query:{name:'pagea'}}}></Link>
   <Link href="/pageB?name=pageb"></Link>
   <button onClick={goTo}/>
</div>

// pages/pageA.js
import {withRouter} from 'next/router' // 只有使用了该方法才有接收参数的能力
const PageA = ({router})=>{
   return (
       <>
          <div>{router.query.name}</div>
       </>
   )
}

路由中的6个钩子事件（待续）