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>
          <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
• routeChangeComplete
• beforeHistroryChange
• routeChangeError
• hashChangeStart
• hashChangeComplete

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

注意404不属于路由错误

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>
        </>
    )
}
复制代码