文章29 | 阅读 13262 | 点赞0
DEMO地址
参考 4.params.js
React路由取参数,有两种:
?a=1
:这种属于 search 字符串,在 location.search
里取值;/a/123
:这种需要从 match.params
里取值;但无论哪种,路由获取到的值,是跳转后的那一刻的值,而不是实时更新的最新值。
具体来说:
abc
),这个值作为参数传递;abc
;def
;abc
还是 def
;abc
;abc
,这个值读取到的是当前路径的值,而不是将要跳转的路径的值,因此不是实时更新的(显然,也不应该是实时更新的);手动修改地址栏的 url:
ggg
,那么请问读取到的值是多少?abc
;abc
,而不是 ggg
;获取最新值:
比较特殊的,有关生命周期:
示例:
【例行引入和子组件】
import React from "react";
import {HashRouter as Router, Link, Route} from 'react-router-dom'
const First = props => <div>
第一个组件读取参数(location.search) {props.location.search}
</div>
const Second = props => <div>
第二个组件读取参数(match.params.myParams) {props.match.params.myParams}
</div>
【父组件,负责配置路由和传值】
class RoutingNested extends React.Component {
constructor() {
super()
this.state = {
firstNumber: 0,
secondNumber: 0
}
this.changeFirst = this.changeFirst.bind(this)
this.changeSecond = this.changeSecond.bind(this)
}
render() {
return <div>
<h3>4、React-router 传参</h3>
<h3>请在对应的跳转标签里,输入你想要传的值</h3>
<Router>
<div>
<li>
<Link to={`${this.props.match.url}/1?a=${this.state.firstNumber}`}
onClick={() => {
console.log('Link 标签(跳转到/1)的 onClick 事件', this.props.location)
}}>
示例1
</Link>
<input type="text" value={this.state.firstNumber} onChange={this.changeFirst}/>
</li>
<li>
<Link to={`${this.props.match.url}/2/${this.state.secondNumber}`}
onClick={() => {
console.log('Link 标签(跳转到/2)的 onClick 事件', this.props.location)
}}>
示例2
</Link>
<input type="text" value={this.state.secondNumber} onChange={this.changeSecond}/>
</li>
<hr/>
<Route path={`${this.props.match.url}/1`} component={First}/>
<Route path={`${this.props.match.url}/2/:myParams`} component={Second}/>
</div>
</Router>
</div>
}
changeFirst(e) {
this.setState({
firstNumber: e.target.value
})
}
changeSecond(e) {
this.setState({
secondNumber: e.target.value
})
}
}
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq20004604/article/details/79440416
内容来源于网络,如有侵权,请联系作者删除!