match.params.id 在反应路由器 dom 中不起作用

Question

我已经在我的项目中安装了最新版本的 react-router-dom。它说匹配是未定义的。但是，当我使用 react-router-dom@5.2.0 时，它可以正常工作。

谁能告诉我应该如何更改我的代码以使用 match.params.id 或最新的 react-router-dom 中的替代方法是什么？？

附上我的代码，在 react router dom version@5.2.0 中运行良好。

import React from 'react';
import { useState, useEffect } from 'react';


function ItemDetail({match}) {
  const [item, setItem]= useState({});
  const [isLoading, setIsLoading] = useState(false);
  const [hasError, setHasError] = useState(false);
    useEffect(()=>{
        fetchItem();
        //console.log(match);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    },[setItem]);
    
    const fetchItem= async ()=>{
      setIsLoading(true);
      setHasError(false);
      try {
        const fetchItem= await fetch(`https://fortnite-api.theapinetwork.com/item/get?id=${match.params.id}`
        );
        const item1 = await fetchItem.json();
        setItem(item1.data.item);
        console.log(item);
        console.log(item1);
        
      } catch (error) {
        setHasError(true);
      }
      setIsLoading(false);
        
    }    
  return (
    <div >
        <h1>{item.name}</h1>
    </div>
  );
}

export default ItemDetail;

Answer 1

第一个import { useParams } from 'react-router-dom';

添加const {id} = useParams();

而不是使用(match.params.id)，只使用(id)

希望这会奏效！

Answer 2

您可以尝试使用钩子：useParams，它会返回一个对象，其中包含您的路由中的所有变量

const params = useParams();

如果问题仍然存在，则可能是您的组件层次结构或路由定义存在问题