Next.js

创建方式

1.依赖next.js react react-dom即可创建

2.create-next-app 创建

页面路由

通过pages文件夹下的路径自动配置路由

组件创建

可放入components文件夹,引入组件名需大写首字母,但是文件名可小写。通过children传递参数。

路由标签跳转和编程跳转

标签跳转

引入next/link 注意a标签的包裹

编程跳转

引入next/router 在封装时发现router.push只能放常量


export default function Home() {
  function goto(){
    Router.push('/area')
  }
  return (
    <>
        <div>我是首页</div>
        <div><Link href='/area'><a>去A页面</a></Link></div>
        <div><Link href='/barea'><a>去B页面</a></Link></div>
        <div><Link as='s' href="/carea"><a>去c页面</a></link><div>
        {/*路由遮盖*/}
        <div>
          <button onClick={goto}>去A页面</button>
          <button onClick={goto}>去A页面</button>
        </div>
    </>
  )

withRouter高阶组件

link

cpgae.js

import {withRouter}from 'next/router'
import Link from 'next/link'

const Cpage=({router})=>{
    return(
        <>
            <div>{router.query.name}服务</div>
            <Link href="/"><a>返回首页</a></Link>
        </>
    )
}
export default withRouter(Cpage)

index.js


import Link from 'next/link'
export default function Home() {
  return (
    <>
        <div>我是首页</div>
        <div><Link href='/area'><a>去A页面</a></Link></div>
        <div><Link href='/barea'><a>去B页面</a></Link></div>
        <div>
          <button onClick={goto}>去A页面</button>
          <button onClick={goto}>去A页面</button>
        </div>
        <div>
          <Link href="/cpage?name=a"><a>选择a</a></Link>
          <br/>
          <Link href="/cpage?name=b"><a>选择b</a></Link>
        </div>
    </>
  )
}

Router

<button onClick={()=>{Router.push('/cpage?name=a')}}>去A页面</button>

Link的href属性和Router.push都可以传递对象

{
    pathname:'/cpage',
    query:{name:'a'}
}

路由的六个钩子事件

routeChangeStart 路由守卫，可以定制权限页面，当越权访问页面时可以显示提示页面

Router.events.on("routeChangeStart",(url)=>{
    if(url=="/list" || url=="l"){
        location.href='./nopremission'
    }
})

routeChangeComplete
beforeHistroryChange
routeChangeError 注意404不属于路由错误（如果要处理404的情况，可以定义_error.js页面，当404时会自动跳转到_error页面，显示错误信息）
hashChangeStart
hashChangeComplete

Router.events.on('routeChangeStart',(...args)=>{
    console.log(args)
})

axios发异步请求

Cpage.getInitialProps=async()=>{
    const promise=new Promise((resolve)=>{
        axios('https://www.fastmock.site/mock/679b9df326968ff1bc82fb895911374e/next/api/cpage').then(
            (res)=>{
                console.log(res)
                resolve(res.data.data)
            }
        )
    })
    return await promise
}
export default withRouter(Cpage)

直接解析res.data.data对象中的内容

const Cpage=({router,age,name})=>{
    return(
        <>
            <div>{router.query.name}服务</div>
            <div>{name}</div>
            <div>{age}</div>
            <Link href="/"><a>返回首页</a></Link>
        </>
    )
}

Next.js学习日记（一）