Next.js

Create a way

Node.js react react-dom

2. The create – next – app to create

Page routing

Automatically configure routes through the paths in the Pages folder

Components to create

You can put it in the Components folder. The imported component name must be uppercase, but the filename can be lowercase. Pass parameters through children.

Routing label jump and programming jump

Label jump

Introduce next/link notice the package with the A tag

Programming a jump

Router. Push is only constant when wrapping next/ Router


export default function Home() {
  function goto(){
    Router.push('/area')}return(< > < div > I am a home page < / div > < div > < Link href = '/ area' > < a > to a page < / a > < / Link > < / div > < div > < Link href = '/ barea' > < a > go to page B < / a > < / Link > < / div > = 's' as the < div > < Link href = "/ carea" > < a > to c page < / a > < / Link > < div > routing cover * /} {/ * < div > < button onClick = {goto} > to a page < / button > < button </button> </div> </>Copy the code

WithRouter high-order components

link

cpgae.js

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

const Cpage=({router}) = >{
    return(
        <>
            <div>{the router. The query. The name} services</div>
            <Link href="/"><a>Return to the home page</a></Link>
        </>)}export default withRouter(Cpage)
Copy the code

index.js


import Link from 'next/link'
export default function Home() {
  return (
    <>
        <div>I am a home page</div>
        <div><Link href='/area'><a>Go to A page</a></Link></div>
        <div><Link href='/barea'><a>Go to page B</a></Link></div>
        <div>
          <button onClick={goto}>Go to A page</button>
          <button onClick={goto}>Go to A page</button>
        </div>
        <div>
          <Link href="/cpage? name=a"><a>Choose a</a></Link>
          <br/>
          <Link href="/cpage? name=b"><a>Choice b</a></Link>
        </div>
    </>)}Copy the code

Router

<button onClick={() = >{Router.push('/cpage? name=a'</button>Copy the code

Link’s href attribute and router.push can both pass objects

{
    pathname:'/cpage'.query: {name:'a'}}Copy the code

Route six hook events

  • routeChangeStart

Route guard, can customize the permission page, when the unauthorized access to the page can display the prompt page

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

  • routeChangeComplete

  • beforeHistroryChange

  • routeChangeError

Note that 404 is not a routing error (if you want to handle the case of 404, you can define the _error. Js page, when 404 is automatically redirected to the _error page, display error message).

  • hashChangeStart
  • hashChangeComplete
Router.events.on('routeChangeStart'.(. args) = >{
    console.log(args)
})
Copy the code

Axios makes an asynchronous request

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)
Copy the code

Parse the contents of the res.data.data object directly

const Cpage=({router,age,name}) = >{
    return(
        <>
            <div>{the router. The query. The name} services</div>
            <div>{name}</div>
            <div>{age}</div>
            <Link href="/"><a>Return to the home page</a></Link>
        </>)}Copy the code