reactjs - React 路由循环 - 根据路由链接显示确切信息

问题描述

我有一个包含 3 个项目的数组。

export default [
     {
          id: "90",
          symbol: "BTC",
          name: "Bitcoin",
          nameid: "bitcoin",
          rank: 1,
          price_usd: "58976.61",
     },
     {
          id: "80",
          symbol: "ETH",
          name: "Ethereum",
          nameid: "ethereum",
          rank: 2,
          price_usd: "4021.22",
     },
     {
          id: "2710",
          symbol: "BNB",
          name: "Binance Coin",
          nameid: "binance-coin",
          rank: 3,
          price_usd: "455.61",
     },
];

我制作了一个组件，它使用地图功能列出了所有 3 个项目。

function CoinList() {
  return (
    <div className="bg-gray-800 w-56 h-56 text-white p-4 rounded-2xl mt-12">
       {users.map((user) => {
          return (
           <Link to={user.symbol}>
             <div className="my-3">
                Coin Name - {user.symbol}
                <p>Price - {user.price_usd}</p>
                   </div>
                      </Link>
                    );
               })}
          </div>
     );
}

我做了一个路由，当按下硬币时，将路由到 mywebsite.com/{coin.symbol} 在每个路由页面上，我想显示一个包含所有信息的“硬币页面”。

我的硬币页面如下所示：

function CoinPage() {
     return (
          <div className="bg-gray-800 w-56 h-56 text-white p-4 rounded-2xl mt-12">
               <p>{users[0].name}</p>
               <p>{users[0].price_usd}</p>
          </div>
     );
}

但当然它只显示第一个硬币的信息，即比特币。

如果链接是 /BTC 或 Ethereum 如果链接是 /ETH 等，我该如何编写代码以显示比特币信息？

标签： reactjsreact-router

reactjs - React 路由循环 - 根据路由链接显示确切信息

问题描述

解决方案

推荐阅读