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