react hook获取浏览器地址

原创已于 2024-06-04 17:30:24 修改 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react获取浏览器地址 #hook获取浏览器地址 #useLocation获取地址

于 2021-07-06 14:50:06 首次发布

react 专栏收录该内容

13 篇文章

订阅专栏

在React项目中，由于使用了hook，传统的this.props和生命周期方法无法获取URL参数。作者通过尝试发现，使用`react-router-dom`库中的`useLocation`钩子可以成功获取。在组件中导入并应用`useLocation`，然后打印其值，即可得到URL的hash信息。此方法解决了在React Router 4.0中不能使用已废弃的BrowserHistory的问题。

项目用的是hook，所以像是无状态中的this.props就可以打印出来地址，这里是不行的，也没有生命周期了，所以在componentDidMount()中获取也是不行的，还有一种方法，BrowserHistory，react-router4.0官方文档里已经废弃了，使用会直接报错，所以也不行，历经千辛万苦终于找到了下面的方法

import { useLocation } from "react-router-dom"
function LookLocation(props) {
    const hash = useLocation()
    console.log(hash)
}
export default LookLocation;