05-路由中的Hook
hook中使用 this.props中的路由
类组件中我们通过 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,Link } 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 对象提供了路由的跳转方法;- 例如 push方法、go方法、replace方法
-
useLocation()
:获取 location 对象,location 对象提供了路由的一些描述相关信息;- 提供路由的一些描述信息,例如 路径pathName等
-
useParams()
:获取动态路由的参数对象;-
提供路由传递的一些参数
-
注意只有动态路由传递的参数可以获取到,其他query等方式传递的参数 获取不到
-
-
Link
:Link标签跳转