Question

我正在构建一个加密货币市场应用程序，以实践反应。当应用程序启动时，具有某些属性的货币列表将显示为列表。我需要导航到其他页面（新页面 - 货币组件），而不在当前页面底部加载组件。目前我能够在页面底部渲染它。但那不是我需要的。

Route to different page[react-router v4]中是否提到了其他方式？因为我需要将点击的对象（货币）传递给新组件（货币）

这是我的加密列表组件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，它只是将页面呈现为当前页面的一部分。

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

P.S：我上传了图片。例如，如果点击以太坊，我需要将货币组件呈现为新页面。

当我点击以太坊（作为示例）而不是在同一组件上呈现这是货币页面时，这应该是输出结果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

Answer 2

我遇到了同样的问题。

您的<Route />位于App.js中。这就是为什么每次导航到货币组件时仍可以在App.js中看到原始视图的原因。

这是解决方案：

您只需要将<Route />移至App.js中的index.js。因为在index.js中没有任何内容。当您导航到<Currency />时，您将进入一个全新的页面。您将永远不会在App.js中看到视图

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

2 个答案: