Question

我很抱歉，首先，我是一名努力学习学校反应的小伙子。我目前正在生成一个表行，其中数据通过数组传递（动态通过套接字）

注意：我使用比特币组件作为调试的衡量标准，我最终将包含此解决方案import modules from files in directory

                {
                  coins.map((coin,i) => (
                    <tr key={i}>
                      <td className="coin_rank">{coin.rank}</td>
                      <td className="coin_link">
                        <img className = "coin_logo" src={require('./logos/' + coin.id + '.png')} alt = {coin.id}/>
                        &nbsp;&nbsp;
                        <Link to={'/coins/' + coin.id}>{coin.name}</Link>

                        <Route path={'/coins/' + coin.id} component={Bitcoin} />
                      </td>
                      <td className="coin_price"><NumberFormat value={coin.price_usd} displayType={'text'} thousandSeparator={true} prefix={'$'} /></td>
                      <td className="market_cap"><NumberFormat value={coin.market_cap_usd} displayType={'text'} thousandSeparator={true} prefix={'$'} /></td>
                      <td className="coin_supply"><strong>{coin.symbol}</strong>&nbsp;&nbsp;<NumberFormat value={coin.available_supply} displayType={'text'} thousandSeparator={true} /></td>
                      <td className="coin_change">{coin.percent_change_24h}%</td>
                    </tr>
                  ))
                }

它加载组件没问题，但它在同一页面加载 Example of the error

但我试图让它在新页面中打开。我在render方法的开头和结尾声明了我的路由器组件。这是否与动态生成表格有关？

Answer 1

如果您想在新页面中打开链接，只需在超链接中设置target="_blank"。

我目前没有我的开发机器，但我们可以将anchor标签接受的每个论点都传递给Link组件。

所以<Link target="_blank"应该有用。

我觉得您希望将表替换为BitCoin组件，而不是将其呈现在同一个表格单元格中。

如果是这种情况，则需要静态路由。因此，此时呈现的组件将被Link指向的组件替换。 https://reacttraining.com/react-router/core/guides/philosophy/static-routing

Answer 2

react-router用于在url更改时覆盖默认浏览器行为并将其映射到React应用程序状态，以便您可以根据URL呈现不同的组件。如果您对更多详细信息感兴趣，请查看https://developer.mozilla.org/en-US/docs/Web/API/History。

在新页面中打开链接是浏览器功能。你不需要react-router及其Link组件。只需使用taget属性渲染一个简单的html链接：

<a target="_blank" href={'/coins/' + coin.id}>{coin.name}</a>

有了这个，你可能会遇到另一个与react-router有关的常见陷阱。如果您只是静态地为资产提供服务，则在新选项卡中打开非根路由（或者仅在现有选项卡中刷新它）将从服务器中向您发出404错误。如果你遇到这个问题，这又不是react-router的事情，你需要设置你的web服务器来将任何路由重定向到index.html（或者调用你的html文件）。

ReactJS表中的路由加载组件而不是新页面

2 个答案: