Next.js中页面刷新时如何保留路由查询参数？

嘿，我碰到过类似的问题，Next.js动态路由刷新丢参数确实挺坑的。咱们一步步来捋清楚解决办法：

你当前的写法有两个核心问题：一是Link的as属性只包含了路由路径，没带上查询参数；二是动态路由的参数键（query.id）和你的动态页面文件名[orderdetail].js不匹配，导致刷新后Next.js没法从URL里正确解析出你需要的参数。

1. 对齐动态路由参数键 #

首先确认你的动态页面文件是pages/dashboard/[orderdetail].js（或.tsx），那在Link组件里，query的键要和文件名的动态部分完全一致，这样路由参数才能被正确识别：

<Link 
  href={{ 
    pathname: '/dashboard/[orderdetail]', 
    // 用orderdetail对应文件名里的[orderdetail]，值传你要的orderNo
    query: { orderdetail: `${orderDetails.orderNo}` } 
  }} 
  as={`/dashboard/${orderDetails.orderNo}`}
>
  {/* 你的链接文本/按钮 */}
</Link>

这样不管是页面跳转还是刷新，this.props.router.query.orderdetail都能稳定拿到orderNo的值，不会丢失。

2. 如果需要额外传递查询参数（比如id） #

如果你既要在URL里显示orderNo，又要传递id作为业务参数，必须把id加到as属性里——不然刷新后浏览器URL里没这个参数，Next.js自然解析不到：

<Link 
  href={{ 
    pathname: '/dashboard/[orderdetail]', 
    query: { 
      orderdetail: `${orderDetails.orderNo}`,
      id: `${orderID}` // 额外的查询参数
    } 
  }} 
  // as属性要包含查询参数，确保浏览器URL里显示?id=xxx
  as={`/dashboard/${orderDetails.orderNo}?id=${orderID}`}
>
  {/* 链接内容 */}
</Link>

这时刷新页面，router.query.id和router.query.orderdetail都能正常获取。

3. 用页面初始化方法拿参数（更可靠） #

客户端渲染的页面，只依赖withRouter的router.query在刷新时可能有延迟，建议用Next.js的数据获取方法提前拿到参数：

类组件用getInitialProps #

import { withRouter } from 'next/router';

class OrderDetailPage extends React.Component {
  componentDidMount() {
    // 直接用props里的参数，不用等router加载
    const { orderdetail, id } = this.props;
    // 调用数据库逻辑
  }
}

// 页面初始化时就获取参数，覆盖跳转和刷新场景
OrderDetailPage.getInitialProps = async ({ query }) => {
  const { orderdetail, id } = query;
  // 这里还能提前调用数据库，把数据直接返回给组件
  // const data = await fetchYourDatabase(id || orderdetail);
  return { orderdetail, id /*, data */ };
};

export default withRouter(OrderDetailPage);

函数组件用getServerSideProps（Next.js 9.3+） #

如果需要实时数据，用getServerSideProps每次请求都执行，参数获取更稳定：

export async function getServerSideProps(context) {
  // 从context里直接拿到路由参数和查询参数
  const { orderdetail, id } = context.query;
  // 调用数据库
  const data = await fetchYourDatabase(id || orderdetail);
  
  return {
    props: { data, orderdetail, id } // 传递给组件的props
  };
}

export default function OrderDetailPage({ data, orderdetail, id }) {
  // 直接用props里的参数渲染页面
  return <div>{/* 页面内容 */}</div>;
}

4. 正确使用withRouter（函数组件版） #

如果坚持用withRouter，函数组件里要配合useEffect监听参数变化：

import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function OrderDetailPage() {
  const router = useRouter();
  
  useEffect(() => {
    const { orderdetail, id } = router.query;
    // 确保参数存在再调用数据库
    if (orderdetail || id) {
      // 执行数据库调用逻辑
    }
  }, [router.query]); // 监听router.query的变化
  
  return <div>{/* 页面内容 */}</div>;
}

• as属性决定了浏览器地址栏显示的URL，所有需要传递的参数（路由参数/查询参数）都要包含在as里，刷新时Next.js才会从URL里解析这些参数。
• 动态路由的参数键必须和页面文件名（[xxx].js）里的xxx完全一致，否则Next.js无法识别这个路由参数。

内容的提问来源于stack exchange，提问作者Taio