React页面间路由跳转方法和传参

2023-03-29  本文已影响0人  Jesse_001

页面跳转并传参方法:

import { useHistory } from 'react-router-dom';
function Index(props){
  const history = useHistory()
  const goToAnotherPage = () => {
    history.push({pathname:'/another', query:{name:'Jesse',age:'20'} })
  }
}

另一个页面获取参数的方法:

const [ name, setName ] = useState()
useEffect(()=>{
  let params = props.location.query
  if(params) {
    // 防止刷新丢失数据
    sessionStorage.setItem('pageQueryData', JSON.stringify(params))
  }else{
    params = JSON.parse(sessionStorage.getItem('pageQueryData'))
  }
  if(params && params.name){
    setName(params.name)  
  }
},[props.location.query])
上一篇 下一篇

猜你喜欢

热点阅读