React房产网站：首页state如何在/imoveis页面展示？props传值失败

直接用props传递searchResults到/imoveis页面的方式不正确，原因是跨路由跳转的页面属于独立的组件实例，props无法跨路由层级传递状态。

下面是几种可行的实现方案：

• 路由传参：在首页跳转至/imoveis时，将searchResults通过路由的state携带过去。
  示例代码（假设使用React Router）：

  // 首页跳转逻辑
  import { useNavigate } from 'react-router-dom';
  const navigate = useNavigate();
  const goToImoveis = () => {
    navigate('/imoveis', { state: { searchResults } });
  };
  
  // /imoveis页面获取状态
  import { useLocation } from 'react-router-dom';
  const location = useLocation();
  const searchResults = location.state?.searchResults;
  

• 全局状态管理：如果后续有更多跨页面/组件的状态共享需求，用Redux、Zustand或React Context将searchResults设为全局状态，/imoveis页面直接从全局状态中读取数据即可。

• URL查询参数：将「租赁/购买」的选择转换为URL查询参数（比如/imoveis?mode=rent），在/imoveis页面读取参数后，再根据参数获取对应结果。这种方式支持页面刷新后保留状态，也能生成可分享的链接。

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