no message
This commit is contained in:
@@ -21,3 +21,5 @@
|
|||||||
13、路由传参 pathname
|
13、路由传参 pathname
|
||||||
14、push与replace
|
14、push与replace
|
||||||
15、witchRoute 使一般组件拥有路由组件的属性,返回值是一个新组件
|
15、witchRoute 使一般组件拥有路由组件的属性,返回值是一个新组件
|
||||||
|
16、编程式路由
|
||||||
|
|
||||||
@@ -8,7 +8,7 @@ import queryString from 'query-string';
|
|||||||
import React,{Component} from 'react'
|
import React,{Component} from 'react'
|
||||||
class Car extends Component{
|
class Car extends Component{
|
||||||
render(){
|
render(){
|
||||||
let {search}=this.props.location
|
let {search}=this.props.location // search参数
|
||||||
const {name,id}=queryString.parse(search)
|
const {name,id}=queryString.parse(search)
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
import React,{Component} from 'react'
|
import React,{Component} from 'react'
|
||||||
class New extends Component{
|
class New extends Component{
|
||||||
render(){
|
render(){
|
||||||
const {name,id}=this.props.match.params
|
const {name,id}=this.props.match.params // params参数
|
||||||
console.log(this.props.match.params)
|
console.log(this.props.match.params)
|
||||||
return(
|
return(
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
@@ -16,6 +16,18 @@ class Header extends Component{
|
|||||||
go=()=>{
|
go=()=>{
|
||||||
this.props.history.go(-2)
|
this.props.history.go(-2)
|
||||||
}
|
}
|
||||||
|
push1=()=>{
|
||||||
|
this.props.history.push('/home/news/chenxuan/123')
|
||||||
|
}
|
||||||
|
push2=()=>{
|
||||||
|
this.props.history.push('/home/car?name=chenxuan&id=123456')
|
||||||
|
}
|
||||||
|
replace1=()=>{
|
||||||
|
this.props.history.replace('/home/money')
|
||||||
|
}
|
||||||
|
replace2=()=>{
|
||||||
|
this.props.history.replace('/home/money',{name:"陈轩",age:"18岁",sex:"男"})
|
||||||
|
}
|
||||||
render(){
|
render(){
|
||||||
return(
|
return(
|
||||||
<div className="header">
|
<div className="header">
|
||||||
@@ -23,6 +35,10 @@ class Header extends Component{
|
|||||||
<button onClick={this.back}>前进</button>
|
<button onClick={this.back}>前进</button>
|
||||||
<button onClick={this.forward}>后退</button>
|
<button onClick={this.forward}>后退</button>
|
||||||
<button onClick={this.go}>后退2步骤</button>
|
<button onClick={this.go}>后退2步骤</button>
|
||||||
|
<button onClick={this.push1}>push1-params</button>
|
||||||
|
<button onClick={this.push2}>push2-search</button>
|
||||||
|
<button onClick={this.replace1}>replace1</button>
|
||||||
|
<button onClick={this.replace2}>replace2-state</button>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user