React Router动态匹配slug报错：无法获取undefined的slug属性

我来帮你排查这个问题！这个TypeError: Unable to get property 'slug' of undefined or null reference错误，本质是你尝试访问的对象是undefined或null，导致无法读取slug属性，咱们一步步拆解解决：

1. 先确认React Router的动态参数是否正确传递 #

首先检查路由配置和参数获取的一致性：

• 确保routes.js里的动态路由参数名正确，比如：

  // routes.js示例
  import { Route, Routes } from 'react-router-dom';
  import PostsPage from './PostsPage';
  
  export default function AppRoutes() {
    return (
      <Routes>
        {/* 这里的:slug要和组件里获取的参数名完全一致 */}
        <Route path="/posts/:slug" element={<PostsPage />} />
      </Routes>
    );
  }
  

• 在PostsPage.js里，要用useParams()正确提取slug参数，注意解构的变量名要和路由里的参数名匹配：

  // PostsPage.js示例
  import { useParams } from 'react-router-dom';
  import { posts } from './posts';
  
  function PostsPage() {
    // 这里的slug必须和路由里的:slug同名
    const { slug } = useParams();
    console.log('当前URL的slug:', slug); // 先打印确认是否有值
  
    // ...后续匹配逻辑
  }
  

如果这里打印的slug是undefined，那就是路由参数名和组件里的解构名不匹配，或者路由路径设置有误。

2. 检查JSON数据的匹配逻辑 #

假设你的posts.js是一个文章数组，比如：

// posts.js示例
export const posts = [
  { slug: 'react-router-guide', title: 'React Router 入门指南' },
  { slug: 'dynamic-routing-tips', title: '动态路由实战技巧' }
];

当你用find匹配slug时，要注意没有匹配到结果时会返回undefined，这时候直接访问post.slug就会报错，所以必须先判断匹配结果是否存在：

// PostsPage.js里的匹配逻辑
const post = posts.find(item => item.slug === slug);

// 先判断post是否存在，再渲染内容
if (!post) {
  return <div>抱歉，该文章不存在！</div>;
}

// 确认post存在后，再访问它的属性
return (
  <div>
    <h1>{post.title}</h1>
    {/* 其他文章内容 */}
  </div>
);

3. 异步加载JSON数据的特殊情况 #

如果你的posts数据是通过fetch/axios异步加载的，组件初始渲染时数据还未返回，posts会是undefined或空数组，这时候find也会返回undefined，导致报错。这种情况要加加载状态判断：

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function PostsPage() {
  const { slug } = useParams();
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 异步加载JSON数据
    fetch('/posts.json')
      .then(res => res.json())
      .then(data => {
        setPosts(data);
        setLoading(false);
      })
      .catch(err => {
        console.error('加载数据失败:', err);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  const post = posts.find(item => item.slug === slug);
  if (!post) {
    return <div>抱歉，该文章不存在！</div>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
    </div>
  );
}

4. 借助开发者工具精准定位 #

打开浏览器的开发者工具（F12），查看Console里的错误栈，定位到具体报错的代码行：

• 如果是useParams()解构的slug为undefined，就回到路由配置检查参数名；
• 如果是post.slug报错，就检查匹配逻辑是否有未处理的undefined情况。

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