在Next.js中实现搜索功能并转到不同的页面

yhxst69z  于 2023-06-22  发布在  其他
关注(0)|答案(1)|浏览(160)

我想实现一个搜索功能,从我的项目主页。选择特性类型和特性位置后,单击搜索按钮。我可以使用useRouter钩子路由到不同的属性页。但是我需要根据位置来过滤显示的数据,这些数据也需要传递给属性类型组件。假设我选择属性类型为土地,位置为印度,那么它应该带我到土地属性列表页面,显示印度的所有土地。如何实现此功能?
先谢谢你了!
页面结构

a14dhokn

a14dhokn1#

我能够使用useRouter钩子实现解决方案。基于所选属性的类型,我将推送路径名和查询参数,即所选位置。下面是示例代码片段:

...
     switch(selectedOption?.value) {
          case "Commercial property":
            //console.log("Render Commercial Property Search Form");
            router.push({pathname: "/property/commercial-space", query:{ keyword: selectedLoc}});
           
            break;
          case "Land & Plots":
          
            router.push({pathname: "/property/land", query:{ keyword: selectedLoc}});
          
            break;
          case "Warehouses & ColdStorage":
         
            router.push({pathname: "/property/warehouse", query:{ keyword: selectedLoc}});
          
            break;
            case "Factory & Industrial Building":
            
              router.push({pathname: "/property/industry", query:{ keyword: selectedLoc}});
              // Render Job Search Form component
              break;
          default:
        
            router.push({pathname: "/property/commercial-space", query:{ keyword: selectedLoc}});
            break;
        }
      
      }
...

相关问题