使用React Router的history跳转时如何传递Props？

别担心，React Router的路由跳转传参确实容易踩坑，我来帮你一步步解决这个问题～

先分析你遇到的核心问题 #

1. 路由匹配冲突：你App组件里的根路径<Route path='/'>没有添加exact属性，当跳转到/search-results时，这个路由依然会被匹配，导致Search和SearchResults组件可能同时渲染或冲突，这是页面空白的主要原因之一。
2. 异步状态更新的时序问题：setPeople是异步更新状态的，你在调用它之后立刻执行history.push，此时people状态可能还没完成更新，导致SearchResults拿到的是空数据。
3. Props传递的可靠性问题：直接通过Route嵌套组件传递props，在路由跳转后如果状态同步不及时，很容易出现数据丢失。

具体解决方案 #

方案1：通过路由state传递数据（最可靠的方式）

这种方式不需要依赖组件状态，直接把数据随路由跳转传递，避免异步更新的时序问题。

1. 修复路由匹配问题
   给根路径的Route加上exact，确保只有访问/时才渲染Search组件：

// app.js
<main>
  <Route exact path='/'>
    <Search collectWords={collectWords} searchWords={searchWords} />
  </Route>
  <Route path='/search-results'>
    <SearchResults />
  </Route>
</main>

2. 修改searchWords函数，传递state
   在history.push时把接口返回的people数据放到路由的state里：

const searchWords = (e) => {
  if (e) {
    e.preventDefault();
    restAPI.getPeople(words)
      .then(response => {
        const peopleData = response.data.data;
        setPeople(peopleData); // 本地状态依然可以保留，用于其他场景
        // 把数据通过路由state传递
        history.push({
          pathname: '/search-results',
          state: { people: peopleData }
        });
      })
      .catch(error => {
        console.error('搜索请求失败:', error);
        // 这里不要直接throw，避免触发未捕获的Promise错误，建议提示用户
      });
  }
}

3. 在SearchResults组件中获取state
   用useLocation钩子拿到路由传递的state：

// SearchResults.js
import { useLocation } from 'react-router-dom';

const SearchResults = () => {
  const location = useLocation();
  // 加个兜底，避免state不存在的情况
  const people = location.state?.people || [];

  return (
    <div className="search-results">
      {/* 你的渲染逻辑，比如遍历people */}
      {people.map(person => (
        <div key={person.id}>{person.name}</div>
      ))}
    </div>
  );
}

方案2：通过Route的render属性传递props（依赖组件状态）

如果你更倾向于直接通过props传递，可修改Route的写法，用render方法动态传递最新的people状态：

// app.js
<Route path='/search-results' render={() => <SearchResults people={people} />} />

这种方式需要确保people状态已经更新完成，同时必须给根路由加上exact避免冲突。

额外注意点 #

• 不要在Promise的catch里直接throw new Error，这会导致未捕获的错误，建议用console.error打印并给用户显示错误提示。
• 路由state里的数据会存在浏览器的历史记录中，刷新页面时如果是直接访问/search-results，state会丢失，这种情况可以考虑把搜索关键词放到URL参数里，再在SearchResults组件中重新请求数据。

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