Next.js路由传递参数

1.query传递参数跳转

• 创建service.js文件

import Link from "next/link";
function Service() {

  return (
    <div>
      <Link href="/list/my?name=服务"><a>去My.js页面</a></Link>
    </div>
  )
}

export default Service

• 创建phone.js文件

import Link from "next/link";
function Phone() {
  return (
    <div>
      <Link href="/list/my?name=电话"><a>去My.js页面</a></Link>
    </div>
  )
}
export default Phone

• 创建my.js文件

import { withRouter } from 'next/router';
import Link from 'next/link';

const My = ({ router }) => {
  return (
    <>
      <div>这是{router.query.name}页面 </div>
      <Link href='/'><a>返回首页</a></Link>
    </>
  )
}
export default withRouter(My)

2.编程式传递参数跳转
直接在phone.js上编写

/*
 * @Author: xinxi
 * @Date: 2021-03-02 14:20:29
 * @Description: Do not edit
 */
import React from 'react'
import Link from "next/link";
import Router from "next/router";


function Phone() {

  function goMyFunc() {
    Router.push("/list/my?name=电话btn")
  }

  function goMyFunc1() {
    Router.push({
      pathname: "/list/my",
      query:{name:"编程式跳转"}
    })
  }
  return (
    <div>
      <Link href="/list/my?name=电话"><a>去My.js页面</a></Link> <br />
      <Link href={{ pathname: "/list/my",query:{name:"link导航"}}}><a>去My.js页面</a></Link> <br />
      <button onClick={goMyFunc}>go去My.js页面</button> <br />
      <button onClick={goMyFunc1}>go1去My.js页面</button>
    </div>
  )
}
export default Phone

附：
文件结构