如何导航到新页面 react router v4

Question

我正在构建一个加密货币市场应用程序来练习 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-router v4 进入新页面呢？

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

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

Answer 1

您已经在此导入。

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