如何导航到新页面反应路由器v4 [英] How to navigate to a new page react router v4
问题描述
我正在构建一个加密货币市场应用程序，以实践reactjs。当应用程序启动时，具有某些属性的货币列表将显示为列表。我需要导航到其他页面（新页面 - 货币组件），而不在当前页面底部加载组件。目前我能够在页面底部渲染它。但这不是我需要的。
除了
当我点击以太坊时，这应该是输出结果（作为示例）而不是在同一组件加密列表上呈现这是货币页面！。
您已经拥有了此处的导入。
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>
）
如果在您的CyptoList页面中，您可以像这样将标题放在那里< Header />
现在，下一部分，路由器，您可能想要创建一个新的Router.js文件或分开它。或者你可以这样做。
// Routes.js
import来自'react'的React;
import {BrowserRouter，Route，Switch}来自'react-router-dom'
从'./CryptoList'导入CryptoList; //或任何位置是
从'./Currency'导入货币; //或任何位置是
export default（）=> （
< BrowserRouter>
< Switch>
< Route exact path =/component = {CryptoList} />
< Route path =/ currency component = {Currency} />
< / Switch>
< / BrowserRouter>
）;
然后当您想要将路由保存在Routes.js文件中时，您可以这样做。
从'./Routes'导入路线;
并通过这样做来使用它......
<路线/>
您可以随时在带有CodeSandbox和CodePen链接的媒体上引用此示例。 https://medium.com/@pshrmn/a- simple-react-router-v4-tutorial-7f23ff27adf
I'm building a crypto currency market app as an to practice 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] ? Because I need to pass the clicked object (currency) to the new component (Currency)
Here's my CryptoList component 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
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>).
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.
So how can I go to a new page using react-router v4 ?
P.S : I've uploaded the image. As an example if click on Ethereum I need to render the Currency component as a new page.
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.
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.
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. 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.
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. https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
这篇关于如何导航到新页面反应路由器v4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
