React路由传参异常：搜索结果无法在/search-results路由展示

1. 确认跳转时机：数据完成筛选后再执行跳转 #

如果shoppingResults是异步生成（比如API请求、复杂计算），很可能你在数据还没生成时就触发了跳转，导致传递的是空值或未更新的数组。

修复示例：

// SearchBar组件
const [searchQuery, setSearchQuery] = useState('');
const navigate = useNavigate();

const handleSearch = async () => {
  // 先完成筛选/请求逻辑
  const filteredResults = await getFilteredShoppingData(searchQuery);
  // 直接传递刚获取的结果，避免依赖异步的setState
  navigate('/search-results', { state: { results: filteredResults } });
};

注：setState是异步操作，若先调用setShoppingResults再跳转，大概率拿不到最新的state值，直接传递刚生成的结果更稳妥。

2. 目标组件正确接收并处理传递的state #

跳转后，/search-results页面需要通过useLocation()获取路由state，同时要处理state为空的边界情况。

修复示例：

// SearchResults组件
import { useLocation } from 'react-router-dom';

const SearchResults = () => {
  const location = useLocation();
  // 用可选链避免state未定义时报错，同时给默认空数组
  const results = location.state?.results || [];

  return (
    <div>
      {results.length > 0 ? (
        <div className="results-list">
          {results.map(item => (
            <div key={item.id} className="result-item">{item.title}</div>
          ))}
        </div>
      ) : (
        <p>no results found</p>
      )}
    </div>
  );
};

3. 排查组件缓存导致的不渲染问题 #

如果SearchResults用了React.memo做性能优化，可能会因为依赖判断逻辑错误，导致state更新时组件不重新渲染。

修复示例：

// 若使用React.memo，需正确比对state变化
const SearchResults = React.memo((props) => {
  const location = props.location;
  const results = location.state?.results || [];
  
  // ...组件渲染逻辑
}, (prevProps, nextProps) => {
  // 深度比对state内容，确保数据变化时触发重渲染
  return JSON.stringify(prevProps.location.state) === JSON.stringify(nextProps.location.state);
});

如果没有强性能需求，直接移除React.memo也能解决问题。

4. 备选方案：传递筛选条件而非直接传结果 #

如果数据量较大或时序问题难以解决，更可靠的方式是跳转时传递筛选参数（比如搜索关键词、分类），在目标组件中重新执行筛选逻辑：

// SearchBar组件跳转时传URL参数
navigate(`/search-results?query=${encodeURIComponent(searchQuery)}&category=${selectedCategory}`);

// SearchResults组件获取参数并重新筛选
import { useSearchParams } from 'react-router-dom';

const SearchResults = () => {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query');
  const category = searchParams.get('category');
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (query) {
      const fetchResults = async () => {
        const data = await getFilteredShoppingData(query, category);
        setResults(data);
      };
      fetchResults();
    }
  }, [query, category]);

  return (
    <div>
      {results.length > 0 ? (
        <div className="results-list">{/* 渲染结果 */}</div>
      ) : (
        <p>no results found</p>
      )}
    </div>
  );
};

这种方式不仅解决时序问题，还支持页面刷新后保留筛选结果，体验更稳定。

内容的提问来源于stack exchange，提问作者Noni P.