Next.js搜索路由重复问题咨询（无需react-router解决方案）

你遇到的问题本质是相对路径跳转导致的路由嵌套，以下是几种无需额外引入react-router（你当前使用的应该是Next.js的router）的解决办法：

• 使用绝对路径跳转
  把router.push的路径改成以/开头的绝对路径，不管当前处于哪个路由，都会直接跳转到根目录下的search路径，彻底避免相对路径带来的嵌套问题。修改后的代码：

  const searchHandler = (e) => {
    e.preventDefault();
    // 改用绝对路径，无需判断当前路由
    router.push(`/search/${searchText}`);
  
    console.log(searchText); //sil
    setSearchText("");
    searchRef.current.blur();
  };
  

• 用replace替代push修改历史记录
  如果不需要保留之前的搜索路由历史，可以用router.replace替换当前的历史记录条目，而不是新增一条。这样即使在/search路径下再次搜索，也不会生成/search/search/xxx的嵌套路由：

  const searchHandler = (e) => {
    e.preventDefault();
    router.replace(`/search/${searchText}`);
  
    console.log(searchText); //sil
    setSearchText("");
    searchRef.current.blur();
  };
  

• 将搜索关键词作为查询参数传递
  换一种路由设计，把搜索关键词放在查询参数里（比如/search?q=xxx），而不是嵌套在路径中。这种方式路由始终是/search，完全不会出现重复问题：

  const searchHandler = (e) => {
    e.preventDefault();
    router.push({
      pathname: "/search",
      query: { q: searchText }
    });
  
    console.log(searchText); //sil
    setSearchText("");
    searchRef.current.blur();
  };
  

• 封装统一的搜索跳转函数
  把搜索跳转逻辑封装成全局函数，确保所有调用都使用正确的绝对路径，避免各处调用时出错：

  const goToSearch = (keyword) => {
    if (!keyword.trim()) return;
    router.push(`/search/${encodeURIComponent(keyword)}`);
  };
  
  const searchHandler = (e) => {
    e.preventDefault();
    goToSearch(searchText);
    
    console.log(searchText); //sil
    setSearchText("");
    searchRef.current.blur();
  };
  

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