Next.js动态路由页面如何获取URL路径中的searchText参数？

针对你用Next.js实现/search/[searchText]动态路由获取参数的问题，以下是对应不同路由体系的可行方案：

一、Pages Router 场景（pages目录下的路由） #

你之前误用了React Router的工具，Next.js Pages Router有自己的路由API，别搞混：

1. 服务端直接获取参数（推荐，适合直接查数据库） #

在pages/search/[searchText]/index.tsx中使用getServerSideProps，服务端渲染阶段就能拿到参数，无需等待客户端 hydration：

// pages/search/[searchText]/index.tsx
export async function getServerSideProps(context) {
  // 直接从context.params中提取动态参数
  const { searchText } = context.params;
  
  // 这里直接调用数据库查询逻辑，比如：
  // const searchResults = await db.query('SELECT * FROM items WHERE title LIKE ?', [`%${searchText}%`]);
  
  return {
    props: {
      searchText,
      // searchResults // 把查询结果传给页面组件
    }
  };
}

function SearchPage({ searchText }) {
  // 直接使用服务端传来的参数
  return <div>当前搜索关键词：{searchText}</div>;
}

export default SearchPage;

2. 客户端路由钩子获取 #

如果需要在客户端处理逻辑，用Next.js自带的useRouter钩子（来自next/router，不是react-router）：

// pages/search/[searchText]/index.tsx
import { useRouter } from 'next/router';

function SearchPage() {
  const router = useRouter();
  // 从router.query中拿到动态参数
  const { searchText } = router.query;

  // 处理客户端 hydration 时参数未加载的情况
  if (!searchText) {
    return <div>加载中...</div>;
  }

  // 这里可以用useEffect配合searchText做客户端查询（比如调用API）
  // useEffect(() => {
  //   fetch(`/api/search?q=${searchText}`).then(res => res.json()).then(data => {
  //     // 处理结果
  //   });
  // }, [searchText]);

  return <div>当前搜索关键词：{searchText}</div>;
}

export default SearchPage;

二、App Router 场景（app目录下的路由） #

如果你的项目用的是Next.js 13+的App Router体系，动态路由文件为app/search/[searchText]/page.tsx，获取方式更简洁：

1. 服务端组件直接拿参数（默认推荐） #

App Router的page组件默认是服务端组件，直接通过params入参获取：

// app/search/[searchText]/page.tsx
// 服务端组件，无需加'use client'
async function SearchPage({ params }: { params: { searchText: string } }) {
  const { searchText } = params;
  
  // 直接在服务端执行数据库查询
  // const searchResults = await db.searchItems(searchText);

  return (
    <div>
      当前搜索关键词：{searchText}
      {/* <div>搜索结果：{JSON.stringify(searchResults)}</div> */}
    </div>
  );
}

export default SearchPage;

2. 客户端组件获取参数 #

如果需要做客户端交互（比如输入框、状态管理），加'use client'指令后用useParams钩子：

// app/search/[searchText]/page.tsx
'use client';

import { useParams } from 'next/navigation';

function SearchPage() {
  const params = useParams();
  const searchText = params.searchText as string;

  if (!searchText) {
    return <div>加载中...</div>;
  }

  // 客户端查询逻辑
  return <div>当前搜索关键词：{searchText}</div>;
}

export default SearchPage;

为什么你之前的方法失败？ #

• window.location.href报错：Next.js存在服务端渲染阶段，此时window对象还未生成，直接访问会报错，只能在客户端hydration完成后使用（不推荐用这个拿路由参数）。
• React Router的ServerRouter无效：Next.js有独立的路由实现，不需要引入react-router的路由组件，必须用Next.js自带的路由API。
• useEffect不生效：大概率是因为你用了错误的路由工具导致参数未正确获取，或者在服务端渲染阶段useEffect不会执行，需要配合Next.js的路由钩子确保参数加载完成。

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