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

Question

我在我的项目中安装了最新版本的react-router-dom。它说匹配未定义。但是，当我使用[email protected]时，它工作正常。

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

附件是我的代码，它在react router dom [email protected]中运行良好。

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();

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

Answer 3

第一个 URL 路由路径

<Route path='/book/:roomid' exact element={<Bookingscreen/>}/>

然后导入

useParams

匹配当前URL

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

const {roomid} = useParams();

/roomid

在路径中，因此 useParams() 中的名称相同；