Question

我现在想知道为什么我的页面没有呈现任何内容，当我相信一切正常时。从像往常一样导入组件开始，我的代码结构如下：

import Bitcoin from '../coins/bitcoin';

然后我尝试做一些测试，所以我使用比特币进行调试，我有这个设置路由到比特币页面

              {
                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>

                      <Router>
                        <Route path={'/coins/' + coin.id} component={Bitcoin} />
                      </Router>

                    </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>
                ))
              }

但是现在页面加载时没有任何内容呈现，我唯一的问题是我使用websockets从API（socket.io）中提取数据。我在比特币组件上收到的唯一错误就是这个错误：

index.js：2178警告：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState，replaceState或forceUpdate。这是一个无操作。

我正在渲染的是一个带有文本TEXT的标题。

但我相信这与此无关？如果是这样，我可能错了......但这就是我能提供的所有内容

编辑：

尝试@Lavish的解决方案，但这就是它最终的结果

            {
              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>

                  </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>
              ))
            }
            <Router>
              <Route path='/coins/bitcoin' component={Bitcoin} />
            </Router>

它现在加载一个新页面但不渲染组件......发生了什么？！

Answer 1

您的组件层次结构应该是这样的。

<Router>
  <Route path="/coins/" component={CoinList} />
  <Route path={`/coins/${coin.id}`} component={Bitcoin} />
</Router>

并且您的列表组件应该只有Link组件来导航路线。在反应路由器v4中，您提到<Route>的位置将使用当前路由组件呈现该特定dom节点。

您正在尝试执行此操作（https://reacttraining.com/react-router/web/guides/dealing-with-update-blocking），此处不适用。

我希望这可以解释。

ReactJS路由器组件不显示任何内容

1 个答案: