ReactJS Router Component Not Displaying Anything

I am currently wondering why my pages are not rendering anything, when I believe everything looks right. Starting off with importing the component like you normally do my code structure follows:

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

Then I am trying to do some testing so I'm using Bitcoin to debug, and I have this setup to route to bitcoin page

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

But nothing is rendering when the page loads now, and the only issue I have is I am using websockets to pull the data from an API(socket.io). The only error I receive on the bitcoin component is this error:

index.js:2178 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

All I am rendering is a header with the text, TEXT, inside.

But I believe this has nothing to do with this? If so, I might be wrong... But this is all that I could provide

EDIT:

Trying the solution from @Lavish but this is what it ends up with

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

It now loads a new page but not rendering the component... What is going on?!

Your component hierarchy should be like this.

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

and your list component should just have Link component to navigate the route. In react router v4 the place where you mention <Route> will render that particular dom node with current routing component.

your are trying to do this (https://reacttraining.com/react-router/web/guides/dealing-with-update-blocking) here which is not applicable.

I hope this explains.