React路由，获取页面地址，useLocation()对比原生location

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文以审视react router中的useLocation()为主要目的，话说使用document.location和useLocation()一样，都可以获得地址栏里面的信息，那么，为啥react router要单独发明一个useLocation()钩子呢？本文中，苏南大叔将就尝试对两者的使用问题做个比对。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验总结。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

useLocation()

本文的主要研究对象，还是react router的useLocation()钩子。可以参考下面这篇文章：

• https://newsn.net/say/react-uselocation.html

原生location

浏览器的js原生就支持的location的写法，有三种，三者完全等效。

• window.location
• document.location
• window.document.location

表格对比

其主要功能就是获得location，对比window.locaiton对象。两者的表格总结如下：

使用场景

两者还有一个最重大的区别，使用场景不同。

• 原生location的写法，使用场景很普遍，浏览器里面的页面都可以使用。它拿到的是页面整体的location。
• useLocation()的写法，则仅仅可以在React程序里面使用，并且是必须在ReactRouter相关标签的内部，才能使用。它最精准表述的是：当前的react程序的location。它实际上拿到的是页面局部，react的root里面的location。

结语

更多react相关经验文章，请参考苏南大叔的博客文章：

• https://newsn.net/tag/react/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。