Next 14路由与URL处理：根路径带参显示搜索路由

要实现去掉URL中的search路径，用根路径/?s=xxx显示搜索内容，需要从组件跳转逻辑和Next.js路由重写配置两方面修改：

1. 修改Search组件的跳转路径 #

把原来跳转到/search/?s=xxx的逻辑改成直接跳转到根路径带参数，同时优化参数处理方式：

修改后的Search组件代码：

"use client";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import navStyles from "../../css/nav/nav.module.css";

const SearchBar: React.FC = () => {
  const router = useRouter();
  const [searchQuery, setSearchQuery] = useState("");
  const searchParams = useSearchParams();

  const handleSearch = async () => {
    const params = new URLSearchParams(searchParams);
    if (searchQuery) {
      params.set("s", searchQuery);
    } else {
      params.delete("s");
    }

    try {
      // 直接跳转到根路径，带上处理后的查询参数
      await router.push(`/?${params.toString()}`);
    } catch (error: any) {
      console.error("Error navigating to search:", error.message);
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      handleSearch();
    }
  };

  return (
    <div className={navStyles.searchStyle}>
      <input
        type="text"
        placeholder="Search..."
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        onKeyDown={handleKeyPress}
      />
    </div>
  );
};

export default SearchBar;

2. 配置Next.js的Rewrites规则 #

在next.config.js中添加规则：当访问根路径且带有s查询参数时，内部渲染/search页面，同时保留URL显示为根路径。

修改后的nextConfig：

const nextConfig = {
  async rewrites() {
    return [
      // 原有分类路由重写规则
      {
        source: "/:slug",
        destination: "/category/sport/:slug",
      },
      // 新增搜索路由重写规则：根路径带s参数时，渲染search页面
      {
        source: "/",
        destination: "/search",
        has: [
          {
            type: "query",
            key: "s",
          },
        ],
      },
    ];
  },
};

export default nextConfig;

这样配置后，用户点击搜索后URL会变成http://localhost:3000/?s=as，同时页面会渲染原/search路由的内容；直接访问根路径不带s参数时，依然显示原来的首页内容。

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