reactjs 如何使用useLocation从'react-router-dom'获取页面的当前“url”

8qgya5xd 于 2023-05-22 发布在 React

关注(0)|答案(2)|浏览(272)

我正在尝试使用'react-router-dom'来理解react项目当前页面的url路径。我想打印我正在浏览的页面的当前位置的URL。
这是怎么做到的。

export default function useQuery () {
  const { search } = useLocation()

  return React.useMemo(() => new URLSearchParams(search), [search])
}

const query = useQuery()
console.log(query)

我想知道是否有另一种方法，我可以打印导航页面的当前URL路径，或者我可以使用useLocation方法来找到它。
PS：我用的是react-router-dom版本5

reactjs

来源：https://stackoverflow.com/questions/76288182/how-to-get-the-current-url-of-a-page-using-uselocation-from-react-router-dom

2条答案

按热度按时间

m1m5dgzv1#

有几种方法可以打印导航页面的当前URL路径。一种方法是使用window.location.pathname属性获取当前URL的路径部分。

console.log(window.location.pathname);

如果你正在使用React和React Router，你也可以使用useLocation钩子来获取当前的location对象，其中包括路径名。

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

export default function App() {
  const location = useLocation();
  console.log(location.pathname);
}

赞(0）回复(0）举报 2023-05-22

ymdaylpp2#

如果你正在使用React Router，你应该能够使用useLocation（）方法来获取所有的路由属性。

const location = useLocation();
const { hash, pathname, search } = location;

否则，您可以简单地使用自动注入所有浏览器window.location.pathname的window.location对象
如果您使用的是HashRouter，则应该读取hash属性

赞(0）回复(0）举报 2023-05-22

我来回答

reactjs 如何使用useLocation从'react-router-dom'获取页面的当前“url”

2条答案

相关问题

热门标签

最新问答