ReactJS Route loading component within table not new page

Question

I am sorry first and foremost, I am a noobie trying to learn reactjs for a project at school. I am currently generating a table row with data passed through an array as such (dynamically through sockets)

NOTE: I am using bitcoin component as a measure of debugging only, I will eventually include this solution 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>
                  ))
                }

It loads the component no problem, but it's loading in the same page Example of the error

But I am trying to get it to open in a new page instead. I have my router components declared at the start and end of the render method. Is this something related to dynamic generating of my tables?

Arun Karunagath · Accepted Answer · 2018-02-02T02:06:45.080

0

If you want to open the link in new page just set target="_blank" in the hyper links.

I don't have my dev machine at the moment, but we could pass every argument that an anchor tag accepts to Link component.

So <Link target="_blank" should work.

I have a feeling that you want the table to be replaced by the BitCoin Component rather that it being rendered in the same table cell.

If that is the case, you need static routing. So the component which is rendered at the moment will be replaced by the component to which Link is pointing to. https://reacttraining.com/react-router/core/guides/philosophy/static-routing

edited Feb 02 '18 at 02:06

answered Feb 02 '18 at 01:27

Arun Karunagath

1,413
10
22

This does not load the component and opens in a new tab. I am trying to load a component into a new page in the same tab – IAC93 Feb 02 '18 at 01:42
In an SPA there is only one page. So are you trying to route to a different component? – Arun Karunagath Feb 02 '18 at 01:47
is a multi-page app possible? I thought it was (if SPA is single page app) – IAC93 Feb 02 '18 at 01:54
lol. I think I miss the whole picture here. Can you make a short version of all relevant Routes. Also, your intention is not clear from the picture. – Arun Karunagath Feb 02 '18 at 01:57
All the components are the main home page and a bitcoin component. That's all I need to solve, and I can fix the rest of the issues through this one solution – IAC93 Feb 02 '18 at 09:51

score 0 · Answer 2 · answered Feb 02 '18 at 09:33

react-router is used to override the default browser behaviour when url changes and map it to your React app state so that you can render different components based on the url. If you are interested in more details, check https://developer.mozilla.org/en-US/docs/Web/API/History.

Opening a link in a new page is browser functionality. You don't need react-router and its Link component for it. Just render a simple html link with taget attribute:

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

With this though, you'll probably hit another common pitfall with react-router. If you are just statically serving your assets, opening a non-root route in a new tab (or just refreshing it in an existing tab), will give you a 404 error from your server. If you run into this problem, this is again not react-router's thing, and you need to set up your web server to redirect any route to index.html (or whatever your html file is called).

ReactJS Route loading component within table not new page

2 Answers2