Next.js Router传递阿拉伯语参数获取过滤数据问题

在Next.js中通过Router传递阿拉伯语搜索值过滤数据时无法得到正确结果，但英文搜索正常。不通过路由直接过滤数据可以正常工作。以下是相关代码：

SearchBar组件代码 #

"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
const SearchBar = () => {
  const [search, setSearch] = useState("");
  const router = useRouter();
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!search) return;
    router.push(`./SearchMeal/${search}`);
  };
return (
    <div className="xl:flex hidden justify-between w-[90%] my-5 pt-6 px-2 pb-2 ">
      
      <div className="flex-1 ">
        <form onSubmit={handleSubmit} className="">
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            type="text"
            placeholder="بحث عن وصفة"
            className="p-2 border-accent outline-none rounded-md text-center placeholder-gray-500  bg-slate-100 "
          />
          <div className="flex justify-center mt-2">
            <button
              disabled={!search}
              type="submit"
              className="p-2 w-[80%] border-none outline-none rounded-md bg-accent text-primary font-bold text-base cursor-pointer disabled:cursor-none disabled:text-gray-100 disabled:bg-gray-400"
            >
              بحث
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default SearchBar;

SearchMeal页面代码 #

"use client";
import { useState, useEffect } from "react";
const SearchMeal = ({ params }) => {
  
  const [searchTerm, setSearchTerm] = useState(params.searchTerm);
return (
    <div className="flex flex-col  w-full self-center justify-center border border-solid">
      <input
        value={searchTerm}
        className="w-1/2 flex self-center mt-5 rounded-md p-2 text-center"
        type="text"
        placeholder="بحث عن وصفة"
        autoFocus
        onChange={(event) => setSearchTerm(event.target.value)}
      />
      <div>
        {MEALS.filter((val) => {
          if (params.searchTerm == "") {
            return val;
          } else if (
            val.title.toLowerCase().includes(searchTerm.toLowerCase())
          ) {
            return val;
          }
        }).map((item) => {
          return (
            <div className="flex justify-center">
              <MealsListCard mealsList={item} />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default SearchMeal;

问题核心是URL编码处理不当和阿拉伯语字符的大小写转换逻辑缺陷，修复步骤如下：

1. 正确处理路由参数的编码与解码 #

阿拉伯语字符直接拼接进URL会被浏览器自动编码，但传递和接收过程中可能出现解码异常，需手动控制编码逻辑：

• 修改SearchBar组件的handleSubmit方法，对搜索值进行URL编码：

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!search) return;
    const encodedSearch = encodeURIComponent(search);
    router.push(`./SearchMeal/${encodedSearch}`);
  };
  

• 在SearchMeal页面中，对接收的参数进行解码：

  const [searchTerm, setSearchTerm] = useState(decodeURIComponent(params.searchTerm));
  

2. 统一过滤逻辑并修复阿拉伯语大小写问题 #

阿拉伯语的toLowerCase()方法存在兼容性问题，需使用指定区域的本地化转换方法，同时统一过滤逻辑的判断基准：
修改SearchMeal页面的过滤代码：

{MEALS.filter((val) => {
  if (!searchTerm) {
    return val;
  }
  // 使用阿拉伯语区域的本地化大小写转换，避免字符转换错误
  return val.title.toLocaleLowerCase('ar-EG').includes(searchTerm.toLocaleLowerCase('ar-EG'));
}).map((item) => {
  return (
    <div className="flex justify-center">
      <MealsListCard mealsList={item} />
    </div>
  );
})}

额外建议 #

确保MEALS数据中的title字段统一使用标准阿拉伯语字符，避免混合半角/全角字符或特殊编码字符，进一步提升匹配准确性。

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