react路由跳转传参和接收参数

props.history.push(path)

1.在路由路径后面/+:+变量名称 ,然后在跳转的时候将值写入变量位置 在组件中用props参数接收
2.url?id=1&name=2 这种方式传参接收方式如:

//第一种方法
const params = new URLSearchParams(props.location.search)
//然后调用get方法传入要拿的Key名称得到 如
params.get('id')
//第二种方法
import querystring from 'querystring'
const value = querstring.parse(props.location.search)

3.高阶组件解决跳转进入路由页面props参数为空的问题

import {widthRouter} from 'react-router-dom

export default withRouter(要导出的类名)'

4.用户离开页面回调问询钩子

import {Prompt} from 'react-router-dom'

<Prompt 
when={绑定要验证的字段名称}
message={提示语句}
/>