不带参数,静态路由;带参数,根据参数不同显示不同内容,动态路由。
一、路由跳转
标签式跳转
在pages下新建juanA.js以及juanB.js作为两个跳转页面。
juanA.js:
import Link from 'next/link'
export default ()=>(
<>
<div>juanA page</div>
{/* 文档中规定必须放a标签,Link下只能有一个父级标签,即多个标签要用一个a标签包裹起来 */}
<Link href='/'>
<a>返回首页</a>
</Link>
</>
)
juanB.js:
import Link from 'next/link'
export default ()=>(
<>
<div>juanB page</div>
{/* 必须放a标签 */}
<Link href='/'><a>返回首页</a></Link>
</>
)
修改index.js:
import React from 'react'
import Link from 'next/link'
const Home = ()=>(//圆括号表示只有返回值没有业务逻辑,有业务逻辑用大括号
<>
<div>我是首页</div>
<div><Link href="/juanA"><a>去juanA页面</a></Link></div>
<div><Link href="/juanB"><a>去juanB页面</a></Link></div>
</>
)
export default Home
效果如下:
编程式跳转
复用性更强。
在index.js中引入router:
import Router from 'next/router'
在index.js中增加一个按钮,点击跳转到juanA页面(增加了业务逻辑goToA方法,注意修改为大括号):
const Home = () => {//圆括号表示只有返回值没有业务逻辑,有业务逻辑用大括号
function goToA(){
Router.push('/juanA')
}
return (
<>
<div>我是首页</div>
<div><Link href="/juanA"><a>去juanA页面</a></Link></div>
<div><Link href="/juanB"><a>去juanB页面</a></Link></div>
<div>
<button onClick={goToA}>juanA</button>
</div>
</>
)
}
效果如下:
二、参数传递
Next.js框架只能用query传递参数,比如?id=1。
标签形式
传递参数
修改index.js文件:
import React from 'react'
import Link from 'next/link'
const Home = () => {//圆括号表示只有返回值没有业务逻辑,有业务逻辑用大括号
return (
<>
<div>我是首页</div>
<div>
<Link href="/sport?name=篮球"><a>选择篮球</a></Link>
<br/>
<Link href="/sport?name=羽毛球"><a>选择羽毛球</a></Link>
</div>
</>
)
}
export default Home
接收参数
在pages下新建sport.js文件:
import {withRouter} from 'next/router'
import Link from 'next/link'
// 只有使用withRouter才能有router的值
const Sport = ({router})=>{
return (
<>
<div>{router.query.name}是我最喜欢的运动</div>
<Link href="/"><a>返回首页</a></Link>
</>
)
}
export default withRouter(Sport)
效果如下:
编程形式
引入router:
import Router from 'next/router'
新增一个按钮跳转到sport页面,并编写方法传递参数,这里传递的是一个对象(也可以用带?的简单字符串):
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {//圆括号表示只有返回值没有业务逻辑,有业务逻辑用大括号
function gotoSport(){
Router.push({
pathname:'/sport',
query:{name:'篮球'}
})
// 同以下:
// Router.push('/sport?篮球')
}
return (
<>
<div>我是首页</div>
<div>
<Link href="/sport?name=篮球"><a>选择篮球</a></Link>
<br/>
<Link href="/sport?name=羽毛球"><a>选择羽毛球</a></Link>
</div>
<div>
<button onClick={gotoSport}>选篮球</button>
</div>
</>
)
}
export default Home
实现效果:
那么Link标签的形式能不能传递对象呢?当然可以。
修改篮球的Link跳转如下:
<Link href={{pathname:'/sport',query:{name:'篮球'}}}><a>选择篮球</a></Link>
运行项目,跳转成功。