基于React路由跳转的几种方式_React_

history.push({pathname: '/personal', search: 'test=22222'})

import React from 'react' import { useHistory } from 'react-router-dom' export default ()=> { const history = useHistory() // 页面跳转方法 history.push({pathname: '/personal', search: 'test=22222'}) return 123 }

import React from 'react' import { useLocation } from 'react-router-dom' export default ()=> { const location = useLocation() // 页面跳转方法 console.log(location, 'props') return 123 }

history.push({pathname: '/personal', state: {test: 'dashboard'}})

import React from 'react' import { useHistory } from 'react-router-dom' export default ()=> { const history = useHistory() // 页面跳转方法 history.push({pathname: '/personal', state: { test: 'dashboard' }}) return 123 }

import React from 'react' import { useLocation } from 'react-router-dom' export default ()=> { const location = useLocation() // 页面跳转方法 console.log(location, 'props') return 123 }

import { Link } from “react-router-dom”

切换考试科目 

componentDidMount() {         console.log(this.props.location.state.XXX);   //xxx指state对象中的键名         }

function Fast(props) {      ...     useEffect(() => {         console.log(props.location.state.XXX);//xxx指state对象中的键名     }) }

{this.props.history.push('/detail/88')}}>跳往详情页`

//  react-router-dom是通过“/:”去匹配url传递的参数 ,即id获取到上面的url传过来的88  //页面接收参数 componentDidMount(){   console.log(this.props.match.params); }

{this.props.history.push({     pathname: '/detail', //要跳转到的路径     state: {  //参数地址栏不显示，刷新地址栏，参数不丢失       id: 456     }   })}}>去详情页

 //页面接收参数 componentDidMount(){     console.log(this.props.history.location.state); }

{this.props.history.push({     pathname: '/detail', //要跳转到的路径     query: {         id: 456     }   })}}>去详情页

 //页面接收参数 componentDidMount(){     console.log(this.props.history.location.query); }