next 笔记

路由 钩子

import {widthRouter}  from  'next/Router'
Router.push(
		{
			pathname:'',
			query:{name:''}
		}
	)

const demo  = ({router}) =>{
	return <>
				 
		
}

export default widthRouter



  Router.events.on('routeChangeStart',(...args)=>{
    console.log('1.routeChangeStart->路由开始变化,参数为:',...args)
  })

  Router.events.on('routeChangeComplete',(...args)=>{
    console.log('2.routeChangeComplete->路由结束变化,参数为:',...args)
  })

  Router.events.on('beforeHistoryChange',(...args)=>{
    console.log('3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:',...args)
  })

  Router.events.on('routeChangeError',(...args)=>{
    console.log('4,routeChangeError->跳转发生错误,参数为:',...args)
  })

  Router.events.on('hashChangeStart',(...args)=>{
    console.log('5,hashChangeStart->hash跳转开始时执行,参数为:',...args)
  })

  Router.events.on('hashChangeComplete',(...args)=>{
    console.log('6,hashChangeComplete->hash跳转完成时,参数为:',...args)
  })

懒加载

外部库懒加载
在代码中不引入

	const handelChange = async () => {
		// 引入
			const moment = await  import ('moment)
		// 使用
			moment.default()
	}

组件懒加载
dynamic

import dynamic from 'dynamic'
	const DynamicComponent = dynamic(import('componetn  path'))
	

head seo

import Head from 'next/head'


	
	

next 中饮引用antd -ui

安装 @zeit/next-caa
npm i @zei/next-css
  新建 next.config.js 文件
  	code:
		const widthCss = require('@zeit/next-css)
			if(typeof require !== 'undefined;){
		require.extwnsion['.css']= file={}
		}
}
module.exports = widthCss({})


安装beble-plugin-import 

 创建.babelrc 文件
 		{
	"presets": :[ "next/babel"],
	"plugins":[
			"import ",
			{
			"libraryName":"antd",
			"style":"css"
			}
		]
	}

打包踩坑

安装antd 后打包 会有css 报错
处理方式: 在pages 文件夹下 创建 _app.js 将需要全局引入的 资源在这里引入 ( antd.css)

你可能感兴趣的:(reactjs)