路由的 Hook（React）

类组件中我们通过 this.props 获取到的关于路由的相关方法和数据，在函数组件中还是可以继续通过参数 props 来获取使用：

export default function Login(prosp) {
    return (
        <button onClick={() => {
            props.history.push('/')        
        }}>登录</button>
    )
}

同样的，在类组件中，如果我们需要非路由组件，需要使用 withRouter 进行包裹处理的，在函数组件中也一样的可以使用：

import { withRouter } from 'react-router-dom';

function TheHeader(props) {
    return (
        <button onClick={() => {
            props.history.push('/login')
        }}>退出</button>
    )
}

export default withRouter(TheHeader)

第三方 Hook

但是，react-router-dom 路由插件也给我们专门提供了第三方的 hook 来实现路由的跳转，以及参数的获取等操作：

import { useHistory, useLocation, useParams } from 'react-router-dom';
export default function TheHeader() {
    const history = useHistory();
    const location = useLocation();
    const params = useParams();
    return (
        <button onClick={() => {
            history.push('/login')
        }}>退出</button>
    )
}

说明：

useHistory()：获取 history 对象， history 对象提供了路由的跳转方法；
useLocation()：获取 location 对象，location 对象提供了路由的相关信息；
useParams()：获取动态路由的参数对象