Next.js 13.4+如何从页面路由（非API路由）获取搜索参数？

针对App Router（app目录） #

如果你的项目用的是13.4+稳定版的App Router，原来next/router里的useRouter已经不再适用，需要换成next/navigation提供的useSearchParams钩子。

示例代码：

'use client'; // 必须添加，因为useSearchParams是客户端专属钩子
import { useSearchParams } from 'next/navigation';

export default function TacoPage() {
  const searchParams = useSearchParams();
  
  // 获取单个搜索参数
  const taco = searchParams.get('taco');
  // 若存在多个同名参数（比如?taco=牛肉&taco=鸡肉），用getAll返回数组
  const tacoOptions = searchParams.getAll('taco');

  return (
    <div>
      <p>选中的taco：{taco}</p>
      <p>所有taco选项：{tacoOptions.join(', ')}</p>
    </div>
  );
}

针对Pages Router（pages目录） #

要是你还在使用传统的Pages Router，原来的useRouter其实仍然有效，之前失效大概率是组件被误标记为服务器组件，或是没处理router.query初始化时的空值问题。

正常使用示例：

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

export default function TacoPage() {
  const router = useRouter();
  const [taco, setTaco] = useState('');

  useEffect(() => {
    // 监听query变化，确保参数加载完成后再取值
    if (router.query.taco) {
      setTaco(router.query.taco);
    }
  }, [router.query]);

  return <div>当前taco参数：{taco}</div>;
}

如果需要在服务器端直接获取参数，用getServerSideProps更稳妥：

export async function getServerSideProps(context) {
  // 从context.query中直接读取搜索参数
  const taco = context.query.taco;
  return {
    props: { taco },
  };
}

export default function TacoPage({ taco }) {
  return <div>服务器端获取的taco参数：{taco}</div>;
}

内容的提问来源于stack exchange，提问作者Octo Palm Tree