如何导航到新页面反应路由器 v4

Question

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

除了中提到的方法，还有其他方法吗？因为我需要将点击的对象（货币）传递给新的组件（货币）

这是我的 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 转到新页面？

P.S : 我上传了图片。例如，如果单击 Ethereum，我需要将 Currency 组件呈现为新页面。

当我单击 Ethereum（作为示例）而不是渲染时，这应该作为输出结果 This is Currency Page ! 在同一组件 CryptoList 上。

Answer 1

您已经在其中导入了。

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

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

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

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

您始终可以在带有 link 的 CodeSandbox 和 CodePen 的媒体上引用此示例。 https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

Answer 2

我遇到了同样的问题

您的 <Route /> 位于 App.js。这就是为什么每次导航到货币组件时，您仍然可以在 App.js.

中看到原始视图

解决方法如下：

您只需要将 <Route /> 移动到 index.js 而不是 App.js。因为在 index.js 中什么都没有。当您导航到 <Currency /> 时，您将转到一个全新的页面。您将永远不会在 App.js

中看到视图

如何导航到新页面反应路由器 v4

How to navigate to a new page react router v4

javascript

reactjs

react-router

react-router-v4

react-router-dom