我正在构建一个加密货币市场应用程序来练习 reactjs。当应用程序启动时，具有某些属性的货币列表将显示为列表。我需要导航到不同的页面（新页面 -货币组件）而不在当前页面底部加载组件。目前我能够在页面底部呈现它。但这不是我需要的。

除了Route to different page[react-router v4] 中提到的方法之外，还有其他方法吗？因为我需要将点击的对象（货币）传递给新的组件（货币）

这是我的CryptoList组件 currency_main.js

import React, { Component } from 'react';
import {
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
  TableRowColumn,
} from 'material-ui/Table';
import Currency from './currency';
import {
  BrowserRouter as Router,
  Link,
  Route
} from 'react-router-dom'

class CryptoList extends Component {
  constructor(props){
    super(props);
    this.state = {
      currencyList : [],
      showCheckboxes : false,
      selected : [],
      adjustForCheckbox : false
    }
  };

  componentWillMount(){
    fetch('/getcurrencylist',
    {
        headers: {
          'Content-Type': 'application/json',
          'Accept':'application/json'
        },
        method: "get",
        dataType: 'json',
    })
    .then((res) => res.json())
    .then((data) => {
      var currencyList = [];
      for(var i=0; i< data.length; i++){
        var currency = data[i];
        currencyList.push(currency);
      }
      console.log(currencyList);
      this.setState({currencyList})
      console.log(this.state.currencyList);
    })
    .catch(err => console.log(err))
  }

  render(){
    return (
      <Router>
        <div>
          <Table>
           <TableHeader
             displaySelectAll={this.state.showCheckboxes}
             adjustForCheckbox={this.state.showCheckboxes}>
             <TableRow>
               <TableHeaderColumn>Rank</TableHeaderColumn>
               <TableHeaderColumn>Coin</TableHeaderColumn>
               <TableHeaderColumn>Price</TableHeaderColumn>
               <TableHeaderColumn>Change</TableHeaderColumn>
             </TableRow>
           </TableHeader>
           <TableBody displayRowCheckbox={this.state.showCheckboxes}>
             {this.state.currencyList.map( currency => (
               <TableRow key={currency.rank}>
                 <TableRowColumn>{currency.rank}</TableRowColumn>
                 <TableRowColumn><Link to='/currency'>{currency.name}</Link></TableRowColumn>
                 <TableRowColumn>{currency.price_btc}</TableRowColumn>
                 <TableRowColumn>{currency.percent_change_1h}</TableRowColumn>
               </TableRow>
             ))}
           </TableBody>
         </Table>
         <div>
           <Route path='/currency' component={Currency} />
         </div>
        </div>
      </Router>
    );
  }

}

export default CryptoList;

这是我的货币组件currency.js

import React, { Component } from 'react';

class Currency extends Component {

  componentWillMount(){
    console.log(this.props.params);
  }

  render(){
    return (
      <div>
        <h3>
          This is Currency Page !
        </h3>
      </div>
    );
  }
}

export default Currency;

这是当我在currency_main 组件（在第二个<TableRowColumn>）中单击货币名称时需要呈现到新页面的货币组件。

我对react有点陌生，仅在教程中尝试react-router，它仅将页面渲染为当前页面的一部分。

那么如何使用 react-router v4 进入新页面呢？

PS：我已经上传了图片。例如，如果单击Ethereum，我需要将Currency组件呈现为一个新页面。

当我点击以太坊（作为示例）而不是呈现This is Currency Page时，这应该作为输出结果！在同一个组件CryptoList 上。