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])