reactルートのジャンプの詳細ページはルートのパラメータを転送します.
3845 ワード
1.App.jsで詳細ページを設定するルート
転載先:https://www.cnblogs.com/LWJ-booke/p/9530730.html
"/Detail/:id" component={Detail} />
2.親ページは、主にページのrouterTo()の方法を見ます.import React, {Component} from 'react';
import {Link} from 'react-router-dom'
class Home extends Component {
render() {
var userList = [
{
id: 100,
name: ' xx',
age: 18
}, {
id: 104,
name: ' xx',
age: 20
}, {
id: 106,
name: ' xx',
age: 30
}
]
return (
<div>
<Link to="/List">Home Link>
<ul>
{
userList.map(v => {
return <li key={v.id}>
<button onClick={()=>this.routerTo(v)}> button>
li>
})
}
ul>
div>
)
}
routerTo(v) {
this.props.history.push({pathname: `/Detail/${v.id}`, state: {data: v}})
}
}
export default Home
3.詳細ページimport React, {Component} from 'react';
class Detail extends Component {
constructor(props, context) {
super(props, context)
console.info(props)
this.userList = props.location.state.data
}
render() {
var userList = {}
return (
<div>
<p> p>
<li> :{this.userList.name}-- :{this.userList.age}--ID:{this.userList.id}li>
div>
)
}
}
export default Detail;
転載先:https://www.cnblogs.com/LWJ-booke/p/9530730.html