next.js路由跳转和路由传参.pdfVIP

next.js路由跳转和路由传参 1. 使用 link import Link from 'next/link' <Link href="/"><a>返回首页</a></Link> 2.编程式跳转 在Next框架中还可以使用Router模块进行编程式的跳转，使用前 也需要我们引入Router import Router from 'next/router' <div> <button onClick={()=>{Router.push('/index ')}}>去 JspangA页面</button> </div 3.link路由传参 在Next.js中只能通过通过query（?id=1）来传递参数，而不能通 过(path:id)的形式传递参数 import React from 'react ' import Link from 'next/link' import Router from 'next/router' const Home = () => { return( <> <div>我是首页</div> <div> <Link href="/xiaojiejie?name=王亚伟"><a>王亚 伟</a></Link><br/> <Link href="/xiaojiejie?name=古天乐"><a>古天 乐</a></Link> </div> </> ) } export default Home import { withRouter} from 'next/router' import Link from 'next/link' const Xiaojiejie = ({router})=>{ return ( <> <div>{router.query.name},来为我们服务了 . </div> <Link href="/"><a>返回首页</a></Link> </> ) } export default withRouter(Xiaojiejie) withRouter是Next.js框架的高级组件，用来处理路由用的 4.编程式路由传参 function gotoXiaojiejie(){ Router.push({ pathname:'/xiaojiejie', query:{ name:'井空' } }) } <Link href={{pathname:'/xiaojiejie',query:{name:'结 衣'}}}><a>选结衣</a></Link><br/>