初步學習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)