在next.js中无法通过/test/:id
这种参数路由的方式获取到参数,它只能通过query
的方式获取参数,即/test?id-xx
的方式
<kink href=/a?id=1">
<button>跳转到a</button>
</Link>
使用Router的方式也可以通过问号这种形式来写,不过还可以通过Router.push()
传递一个对象来写
const goToB = () => {
Router.push({
pathname:'/test/b',
query:{
id:2
}
})
}
此时对应a页面的内容要活的传递过来的id=1,就需要稍微改写一下:
import { withRouter } from 'next/router'
const A = ({ router }) => { <div> this is a page, 参数是{ router.query.id } </div> }
export default withRouter(A)
引入withRouter
组件,他是一个高阶组件(HOC),即参数为被包裹的组件,返回值也是一个组件。导出withRouter包裹的组件,并且给A组件传入了router参数,通过router.query.id获取传递过来的id