react路由跳转传参

1.引入插件

import { useHistory } from 'react-router'

2. query/state传递参数，刷新参数丢失

传递参数

export default (props) => {
	const history = useHistory()
	......
	<a key="routerTo" onClick={() => {
            history.push({
              pathname: '/detail',
               query: { //query也可以改成state
                 dictCode:765
              },
            })
          }}
   >
          进入详情
   </a>
}

接收参数，

export default (props) => {
	const history = useHistory()
	......
	 useEffect(() => {
	    //query也可以改成state
   		console.log(history.location.query) // {dictCode:765}
   		// 注意！当刷新页面获取的参数就为空了。
	 }, [])
}

3. search传递参数，刷新参数还在

传递参数

export default (props) => {
	const history = useHistory()
	......
	<a key="routerTo" onClick={() => {
            history.push({
              pathname: '/detail',
               search: '?dictCode=765'，
               //search:`?${encodeURI(JSON.stringify(record))}` 如果传递的是对象，需要对对象进行url编码不然解码会报错
            })
          }}
   >
          进入详情
   </a>
}

接收参数，

export default (props) => {
	const history = useHistory()
	......
	 useEffect(() => {
	    let routerData = location.hash.split('?')[1]
   		console.log(routerData) // 'dictCode=IsInfo'
   		//console.log(JSON.parse(decodeURI(routerData)))对象解码
   		// 注意！当刷新页面获取的参数还在
	 }, [])
}