访问对象属性并在新页面中显示组件

我想使用Entry_test.js中的ID访问信息，并通过另一个组件DisplayEntry.js显示它。我已经从Entry_test.js中获取了ID并将其链接到DisplayEntry.js，但是当我尝试访问DisplayEntry.js中显示的对象的属性{crypto.name}时，它没有显示任何内容。而且，当我单击链接时也无法打开新页面。这是我的代码：

App.js-

import React  from 'react';
import "bootstrap/dist/css/bootstrap.min.css";

//import Exchange from './components/Exchange';
//import Entry from './components/Entry';
import DisplayEntry from './components/DisplayEntry';
import Entry_test from './components/Entry_test';
import NavBar from './components/NavBar';
import {Route} from 'react-router-dom';

function App(){
  return(

    <div>
       <NavBar/>

       <Route path="/entry" excat component={Entry_test}/>
       {/* <Route excat path="/exchange" component={Exchange}/> */}
       <Route path="/entry/:id" component={DisplayEntry}/>

      </div>

  )
}

export default App;

Entry_test.js-

import React,  {useState,useEffect} from 'react'
import {Link} from 'react-router-dom'
import {Table} from 'reactstrap'
import {Form,Button} from 'react-bootstrap'
// import style from './style.css'
// import Loading from './loading.gif';
import "bootstrap/dist/css/bootstrap.min.css";


const CoinGecko = require('coingecko-api');
const CoinGeckoClient = new CoinGecko();

function Display(){

    useEffect(()=>{
        fetchItems();
    },[]);

    const[cryptos,setCryptos]=useState([]);

    const fetchItems=async()=>{
           const info = await CoinGeckoClient.coins.all();
            console.log(info.data);
            setCryptos(info.data)


    }

    const cryptoJsx=cryptos.map(crypto=>(
        <tr key={crypto.id}>
                <td className="point">
                <img src={crypto.image.thumb}  alt="symbol"/>
                <Link  to={`/entry/${crypto.id}`}>{crypto.id}</Link></td>
                <td className="point">{crypto.symbol}</td>
                <td className="point">{crypto.name}</td>
                <td className="point">{crypto.market_data.current_price.usd}</td>
                <td className="point">{crypto.market_data.total_volume.usd}</td>                   

        </tr>
    ));

    return(
        <div>                    
                <h2 className="text-capitalize text-center my=5">Cryptocurrencies </h2>
                <div className="float-right p-2">
                <Form inline>
                <input type="text" placeholder="Search" className="mr-sm-2" 
                onChange={(event)=>this.search(event.target.value)}/>
                <Button >Search</Button>
                </Form>
                </div>
                <Table striped bordered hover>
                        <thead>
                            <tr className="text-center">
                            <th>Id</th>
                            <th>Symbol</th>
                            <th>Name</th>
                            <th>Current Price</th>
                            <th>Total Volume</th>
                            </tr>
                        </thead>
                        <tbody>
                            {cryptoJsx} 
                        </tbody>
                </Table>

            </div>
    );

}
export default Display

DisplayEntry.js-

import React,  {useState,useEffect} from 'react'
import "bootstrap/dist/css/bootstrap.min.css";

// const CoinGecko = require('coingecko-api');
// const CoinGeckoClient = new CoinGecko();

function Display_info({match}){

    useEffect(()=>{
      fetchItemDis();
      console.log(match); 

    },[]);

    const[crypto , setCrypto]=useState({});

    const fetchItemDis= async() =>{
      let fetchDatadis= await fetch
      (`https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${match.params.id}&order=market_cap_desc&per_page=100&page=1&sparkline=false`);

      const data_dis=await fetchDatadis.json();
    //  const data_dis= await CoinGeckoClient.coins.fetchMarketChart(`${match.params.id}`);
      setCrypto(data_dis);
      console.log(data_dis)
    };       

    return(
      <div>
        {crypto.name}
      </div>

    );

}
export default Display_info