Next.js应用使用useRouter()跳转搜索结果页出现404错误求助

API 探路者

2026-7-16

Next.js 搜索应用路由问题排查方案

一、初始404问题的核心原因

在Next.js App Router规则里，/search路径对应的页面文件必须是app/search/page.js——你最初的目录里根本没有search目录，直接跳转/search自然会返回404。

二、调整目录后的问题修正步骤

你改成app/search/index.js是Pages Router的老写法，App Router不认index.js作为路由页面，必须用page.js。同时同步解决导入和组件重名问题：

1. 修正路由文件命名

把app/search/index.js直接重命名为app/search/page.js，让/search路径能正确映射到该组件。

2. 修复导入与组件重名问题

确保searchResults.js的组件命名唯一，比如别和其他组件都叫Search之类的

在app/search/page.js里正确导入：

import SearchResults from '../searchResults';

如果searchResults.js是需要交互的客户端组件，记得在文件顶部加上'use client';指令

3. 客户端跳转逻辑检查

根目录的app/page.js作为客户端组件，跳转逻辑要确保正确：

'use client';
import { useRouter } from 'next/navigation';

export default function Home() {
  const router = useRouter();

  const handleSearch = (inputTerm) => {
    // 用encodeURIComponent处理特殊字符，避免参数解析错误
    router.push(`/search?term=${encodeURIComponent(inputTerm)}`);
  };

  // 这里写搜索表单的渲染和提交逻辑
}

4. 正确获取查询参数

在app/search/page.js里，直接用App Router自带的searchParams prop获取参数（不用加客户端指令，服务器组件就能用）：

export default function SearchPage({ searchParams }) {
  const searchTerm = searchParams?.term || '';

  return <SearchResults term={searchTerm} />;
}