React路由错误：Cannot destructure 'params' of 'match' as it is undefined的解决

开发专辑封面展示应用时，点击搜索列表的专辑封面跳转至详情页时出现错误：Error: Cannot destructure property 'params' of 'match' as it is undefined

错误原因分析 #

• React Router版本语法混用：代码同时使用了react-router-dom v6和v5的语法。App.js中用了v6的<Routes>组件，但路由配置错误使用了v5的component属性；Album组件依赖v5的路由match props，而v6不再自动向组件传递该参数。
• 路由参数获取方式过时：v6版本中，路由组件不再自动接收match、location等props，直接解构match会导致其值为undefined，进而引发参数解构错误。

修复方案 #

1. 修正App.js的路由配置 #

将路由中的component属性替换为v6要求的element属性，以正确渲染组件：

import logo from './logo.svg';
import './App.css';
import Explore from './components/Explore.js'
import Profile from './components/Profile.js';
import Albums from './components/Album.js';
import Home from './components/Home.js';
import './styles/App.css';
import { BrowserRouter,Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <div style={{height: '100%'}} className = "border bg-dark">
      <BrowserRouter>
        <Routes>
          <Route path='/' element={<Home/>} />
          <Route path='/explore' element={<Explore/>} />
          {/* 替换component为element，符合v6语法 */}
          <Route path='/album/:albumId' element={<Albums />} />
          <Route path='/home' element={<Home/>} />
          <Route path='/profile' element={<Profile msg = ""/>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

2. 更新Album组件的参数获取方式 #

使用react-router-dom v6提供的useParams钩子来获取路由参数，替代原有的match props：

import { useEffect, useState } from 'react';
import { getAlbum } from '../services/backendService';
import Chart from 'react-google-charts';
// 引入v6的useParams钩子
import { useParams } from 'react-router-dom';

const Album = () => {
  const [album, setAlbum] = useState(null);
  // 通过useParams直接获取路由参数
  const { albumId } = useParams();

  useEffect(() => {
    getAlbum(albumId, setAlbum);
  }, [albumId]);

  const getDict = (dict) => {
    const result = [['Key', 'Value']];
    for (const [key, value] of Object.entries(dict)) {
        result.push([key, value]);
    }
    return result;
  } 

  if (!album) {
    return <div>No album found.</div>;
  }

  return (
    <div className="albums">
      <h1>{album.title}</h1>
      <img src={album.cover_image} alt="album cover"></img>
      <div>Released Year: {album.year}</div>
      <div>Genres: {album.genre}</div>
      <div>Format: {album.format.join(', ')}</div>
      <Chart
        chartType="Bar"
        data={getDict(album.community)}
        width="100%"
        height="300px"
        options={{
          title: 'Community data',
          chartArea: { width: '50%' },
          hAxis: {
            title: 'Value',
            minValue: 0,
          },
          vAxis: {
            title: 'Key',
          },
        }}
      />
    </div>
  );
};

export default Album;

验证说明 #

完成上述修改后，点击专辑封面跳转时，useParams会正确获取路由中的albumId参数，调用getAlbum接口加载对应专辑数据，详情页即可正常渲染。

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