如何导航到新页面 React Router v4

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

除了上面提到的还有其他方法吗路由到不同页面[react-router v4] https://stackoverflow.com/questions/40624142/route-to-different-pagereact-router-v4?answertab=votes#tab-top？因为我需要将点击的对象（货币）传递给新组件（货币）

这是我的加密列表组件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组件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-router v4进入新页面呢？

P.S：我已经上传了图片。例如，如果单击Ethereum我需要渲染Currency组件作为新页面。

And this should be resulted as the output when I click on Ethereum (as an example) instead of rendering This is Currency Page ! on the same component CryptoList.

你已经有进口了。

import {
  BrowserRouter as Router,
  Link,
  Route
} from 'react-router-dom'

但是，我会删除 CyptoList 页面中的所有路由，并将该 CyptoList 设为组件。

现在，您希望在代码中使用这些链接在您需要创建一个要在其中显示链接的位置的页面之间导航。

const Header = () => (
    <nav>
        <ul>
            <li><Link to='/'>CryptoList</Link></li>
            <li><Link to='/currency'>Currency</Link></li>
        </ul>
    </nav>
)

If in your CyptoList page you can just put the header in there like this <Header />

现在，下一部分，路由器，您可能想要创建一个新的 Router.js 文件或将其分开。或者你可以做这样的事情。

// Routes.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import CryptoList from './CryptoList';  // or whatever the location is
import Currency from './Currency'; // or whatever the location is

export default () => (
<BrowserRouter>
    <Switch>
      <Route exact path="/" component={CryptoList}/>
      <Route path="/currency" component={Currency}/>
    </Switch>
</BrowserRouter>
);

然后，当您想要将保存在 Routes.js 文件中的路由包含在内时，您可以执行此操作。

import Routes from './Routes';

并通过这样做来使用它......

<Routes />

您始终可以通过指向 CodeSandbox 和 CodePen 的链接在媒体上参考此示例。https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf