[英]How to navigate to a new page react router v4
I'm building a crypto currency market app as an to practice reactjs. 我正在建立一个加密货币市场应用程序作为练习reactjs。 When app starts list of currencies with some properties will be shown as a list.
当应用程序启动时,具有某些属性的货币列表将显示为列表。 I need to navigate to a different page (new page - Currency component) without loading the component on the bottom of current page.
我需要导航到另一个页面(新页面 - 货币组件)而不加载当前页面底部的组件。 At the moment I was able to render it in the bottom of the page.
目前我能够在页面底部渲染它。 But that's not what I need.
但那不是我需要的。
Is there any other way than which is mentioned in Route to different page[react-router v4] ? 在Route到不同的页面[react-router v4]中是否还有其他方法? Because I need to pass the clicked object (currency) to the new component (Currency)
因为我需要将点击的对象(货币)传递给新组件(货币)
Here's my CryptoList component currency_main.js 这是我的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;
And here's my Currency component currency.js 这是我的货币组件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;
And here's the currency component which I need to render into a new page when I click currency name in the currency_main component (Which is in second <TableRowColumn>
). 这是我在currency_main组件中点击货币名称时需要呈现到新页面的货币组件(在第二个
<TableRowColumn>
)。
I'm bit new to react and tried react-router in a tutorial only and it was rendering a page as a part of currenct page only. 我有点新的反应,并且只在教程中尝试使用react-router,它只是将页面呈现为当前页面的一部分。
So how can I go to a new page using react-router v4 ? 那么如何使用react-router v4进入新页面?
PS : I've uploaded the image. PS:我上传了图片。 As an example if click on Ethereum I need to render the Currency component as a new page.
例如,如果单击以太坊,我需要将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 .
在同一个组件CryptoList上 。
You already had the imports in this. 你已经在这里进口了。
import {
BrowserRouter as Router,
Link,
Route
} from 'react-router-dom'
However, I would remove all of the routings in your CyptoList page and just make that CyptoList a component. 但是,我会删除CyptoList页面中的所有路由,并将CyptoList作为组件。
Now, you want to use those Links in your code to navigate between pages you need to make a place that you want to display the links in. 现在,您希望在代码中使用这些链接在您需要创建要显示链接的位置所需的页面之间导航。
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 />
Now, the next part, the Router, you might want to make a new Router.js file or separate it. 现在,下一部分,路由器,您可能想要创建一个新的Router.js文件或将其分开。 Or you could do something like this.
或者你可以做这样的事情。
// 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>
);
Then when you want to include your Routes as you saved it in the Routes.js file you can just do this. 然后,当您想要将路由保存在Routes.js文件中时,您可以执行此操作。
import Routes from './Routes';
and use it by doing this... 并通过这样做来使用它......
<Routes />
You can always refer to this example on medium with a link to a CodeSandbox and CodePen. 您始终可以在具有CodeSandbox和CodePen链接的媒体上引用此示例。 https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
I encountered the same problem. 我遇到了同样的问题。
Your <Route />
is located in App.js. 您的
<Route />
位于App.js. This is why every time you navigate to currency component you can still see original view in App.js. 这就是为什么每次导航到货币组件时,您仍然可以在App.js中看到原始视图。
Here is the solution: 这是解决方案:
You just need to move <Route />
to index.js not in App.js. 您只需将
<Route />
移动到index.js而不是App.js. Because in index.js there is nothing. 因为在index.js中什么都没有。 when you navigate to
<Currency />
you will go to a completely new page. 当您导航到
<Currency />
您将转到一个全新的页面。 You will never see views in App.js 你永远不会在App.js中看到视图
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.