React Router navigate()跳转时state/参数未传递问题

你遇到的问题由两个原因共同导致：

• 你使用的是React Router v6版本，该版本移除了旧版本自动给路由组件注入location/match/history属性的逻辑：你在路由配置里写的element={<SearchResultPage />}属于普通的JSX组件渲染，React Router不会往组件props里注入任何路由相关对象，所以打印props为空是符合版本设计的正常表现。
• 就算在支持props注入的React Router v5版本中，你通过navigate传入的state参数是挂载在location.state字段下，你写的props.location.searchText取值路径本身就是错误的。

函数组件场景下直接使用React Router v6提供的官方Hook取值即可，这是最推荐的写法：

1. 首先修正SearchResultPage的取值逻辑，你原有的搜索触发navigate的传参写法不需要改动：

// 先引入useLocation Hook
import { useLocation } from 'react-router-dom';

export default function SearchResultPage() {
  // 直接通过Hook获取当前路由的location对象
  const location = useLocation();
  // 从location.state中取参数，加可选链和默认值做容错，避免state不存在时报错
  const searchText = location.state?.searchText ?? '';

  // 后续搜索业务逻辑
  return <div>当前搜索关键词：{searchText}</div>
}

通过state传参的方式不会把搜索关键词展示在URL上，用户如果把页面地址分享给其他人、或者直接从收藏夹打开搜索结果页，是拿不到之前传递的searchText参数的。针对搜索场景，更推荐把搜索关键词放在URL查询参数中，支持链接直接访问：

• 修改搜索跳转逻辑：

import { createSearchParams } from 'react-router-dom';

const search = () => {
  console.log("Calling search =>" + searchTerm);
  navigate({
    pathname: "/search_results",
    search: `?${createSearchParams({ q: searchTerm })}`
  });
}

• 在SearchResultPage中通过useSearchParams取值：

import { useSearchParams } from 'react-router-dom';

export default function SearchResultPage() {
  const [searchParams] = useSearchParams();
  const searchText = searchParams.get('q') ?? '';

  // 后续搜索业务逻辑
}

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