初步学习next.js-2-组件,路由,传递参数
Posted baisedeyu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初步学习next.js-2-组件,路由,传递参数相关的知识,希望对你有一定的参考价值。
pages和components
1.直接在根目录下的pages
文件夹下,新建一个jsyang.js
页面,启动后 访问路径为/jsyang
2.在根目录下新建文件夹components,新建组件com1.js文件,
export default ({children})=><button>{children}</button>
在需要引入的页面中
import Com1 from ‘../components/com1‘
直接写
<Jspang>按钮</Jspang>
路由和跳转
标签式导航
import Link from ‘next/link‘
import Link from ‘next/link‘ export default ()=>( <> <div>A page </div>
// link标签里必须家<a></a> <Link href="/"><a>返回首页</a></Link> </> )
Router模块进行跳转
import Router from ‘next/router‘
<div> <button onClick={()=>{Router.push(‘/jspangA‘)}}>去A页面</button> </div>
传递和接收参数
传递参数,只能用query来传递
import Router from ‘next/router‘
import Link from ‘next/link‘
<Link href="/xiaojiejie?name=aaaa"><a>aaaa</a></Link><br/
Router.push(‘/xiaojiejie?name=井空‘)
Router.push({ pathname:‘/xiaojiejie‘, query:{ name:‘井空‘ } })
<Link href={{pathname:‘/xiaojiejie‘,query:{name:‘aaa‘}}}><a>aaa</a></Link><br/>
接收参数
import { withRouter} from ‘next/router‘ const Xiaojiejie = ({router})=>{ return ( <> <div>{router.query.name},来为我们服务了 .</div> </> ) } export default withRouter(Xiaojiejie)
以上是关于初步学习next.js-2-组件,路由,传递参数的主要内容,如果未能解决你的问题,请参考以下文章