React Router报错：Cannot read properties of undefined (reading 'params') 求助

错误原因分析 #

这个错误本质是useParams()无法获取到路由上下文，导致返回undefined，进而解构id时触发报错。常见触发场景：

• 未在根组件包裹Router上下文：React Router v6要求所有路由相关组件必须在<BrowserRouter>（或其他Router类型）的包裹下才能正常工作，否则路由上下文不存在，useParams无法读取参数。
• 组件被直接渲染在路由体系外：如果在非路由场景下直接使用<PropertyDetails />，而非通过/property/:id路由跳转，组件无法获取路由参数。
• API返回结构异常：若接口返回的response.data.results不存在，会导致propertyData始终为null，不过这属于后续渲染的潜在问题，并非当前params错误的直接原因。

具体解决方案 #

1. 给根组件添加Router上下文包裹 #

检查项目入口文件（通常是index.js），必须用<BrowserRouter>包裹整个App，确保路由上下文全局可用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. 确保组件仅通过路由跳转渲染 #

所有进入PropertyDetails页面的操作，必须通过路由跳转实现，比如在列表页使用Link组件：

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

// 示例：房产列表项跳转逻辑
<Link to={`/property/${item.id}`}>查看房产详情</Link>

禁止直接在其他组件中写<PropertyDetails />，这种场景下组件无法获取路由参数。

3. 增加参数校验与API返回校验 #

在useEffect中先判断id是否存在，再发起API请求；同时校验接口返回结构，避免无效数据导致后续渲染错误：

useEffect(() => {
  // 先校验id是否有效，避免空值请求
  if (!id) return;

  axios.get(`http://127.0.0.1:8000/api/v1/core/detail/${id}/`)
    .then((response) => {
      // 校验返回数据结构是否符合预期
      if (response.data?.results) {
        setPropertyData(response.data.results);
      } else {
        console.error('API返回数据结构不符合预期，未找到results字段');
      }
    })
    .catch((error) => {
      console.error('获取房产详情失败:', error);
    });
}, [id]);

4. 确认路由路径匹配规则 #

确保跳转路径严格符合/property/:id格式，比如/property/123是正确的动态参数路径；如果是/property?id=123这种查询参数格式，需要改用useSearchParams获取参数，而非useParams。

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