码迷,mamicode.com
首页 > Web开发 > 详细

初步学习next.js-2-组件,路由,传递参数

时间:2020-06-17 12:49:30      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:一个   page   path   word   初步   link   one   imp   传递参数   

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-组件,路由,传递参数

标签:一个   page   path   word   初步   link   one   imp   传递参数   

原文地址:https://www.cnblogs.com/lxz-blogs/p/13151614.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!