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

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>

并且您的列表组件应该只有链接组件来导航路线。 在 react router v4 中，您提到 <Route> 的地方将使用当前路由组件渲染该特定 dom 节点。

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

我希望这可以解释。