- vue里面指向地址的属性叫path，看到网上很多文章，react路由传参指向的属性也叫path，但是：目前react-router-dom：5.1.2指向地址的属性叫做pathname
1、 pathname + search
- 优点：刷新也在........
- 缺点：只能传字符串，显式传参，不能传过大的数据，传递数据过多会让地址变的很丑
A页面
<Link to={{pathname: '/setting', search:'id=1'}}>jump --- search</Link>
this.props.history.push({
pathname: '/setting',
search: 'a=1'
})
// 取参
B页面
this.props.history.location.search
2、pathname + state
- 这种形式的传参式隐式的，刷新页面就没有了
- 和任意属性一致，但是官方应该指定的是这个，因为刷新后location中会存在state: undefined，任意属性则不会
A页面
<Link to={{pathname: '/setting', state:{id:1}}}>jump --- state</Link>
// 取参
B页面
this.props.history.location.state.id
3、pathname + params
- 配合动态路由传参
- 优缺点同第一种pathname + search的方式
// 动态路由后面加?表示可选，不加表示必选
<Route path="/setting/:id?" component={Setting}></Route>
A页面
let id = 1;
<Link to={{pathname: `/setting/${id}`}}>jump --- params</Link>
// 取参
B页面
this.props.history.match.params.id
4、replace
<Link to="/setting" replace/>
this.props.history.replace('/setting')
5、react withRouter
- 高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.
import React from 'react'
import {
NavLink,
withRouter
} from "react-router-dom"
class Nav extends React.Component{
handleClick = () => {
// Route 的 三个对象将会被放进来, 对象里面的方法可以被调用
console.log(this.props);
}
render() {
return (
<div >
llaala
</div>
);
}
}
// 导出的是 withRouter(Nav) 函数执行
export default withRouter(Nav)
