HashRouter 中 useLocation 位置成员为空

Question

使用

HashRouter

时，以及在使用

useLocation

的组件内，

window.location

对象与

location

中的

useLocation

对象之间存在差异。

当我写这篇文章时，我注意到 useLocation 实际指向的内容可能会令人困惑。

useLocation

的路径名实际上似乎是没有

window.location.hash

的

#

。但

hash

似乎根本没有指向任何东西。

老实说，我不确定是否应该将其作为问题发布在react-routers github上，但我想将其发布在这里，以防我缺少一些关于

useLocation

的基本信息工作（更重要的是与您使用的路由器有关）。

当您将其包裹在

useLocation

与

<BrowserRouter>

与

<HashRouter>

等中时，

<MemoryRouter>

的行为是否有所不同？

来自

window.location

的值：

{
  pathname: "/myPage/"
  hash: "#/testpath/123"
  search: ""
}

来自

location = useLocation()

的值：

{
  pathname: "/testpath/123"
  hash: ""
  search: ""
  key: "abc123"
  state: null
}

Answer 1

当使用

HashRouter

且在组件内使用

useLocation

时，

window.location

对象与

location

来自

useLocation

的对象。

当我写这篇文章时，我注意到周围可能存在混乱

useLocation

实际指向的是什么。

pathname

来自

useLocation

似乎实际上是

window.location.hash

没有 这 ＃。但哈希似乎根本没有指向任何东西。

HashRouter

路由器使用 URL first哈希后定义的路径。

例如，给定：

• 路线：

  <Route path="/testpath/123" element={....} />

• 网址：

  "https://..../#/testpath/123"

从

location

钩子返回的

useLocation

可能看起来像：

{
    "pathname": "/testpath/123",
    "search": "",
    "hash": "",
    "state": null,
    "key": "ff78cgdt"
}

与

window.location

相比

{
    "ancestorOrigins": {
        "0": "https://...."
    },
    "href": "https://..../#/testpath/123",
    "origin": "https://....",
    "protocol": "https:",
    "host": "....",
    "hostname": "....",
    "port": "",
    "pathname": "/",
    "search": "",
    "hash": "#/testpath/123"
}

鉴于：

• 同路线：

  <Route path="/testpath/123" element={....} />

• 网址：

  "https://..../#/testpath/123#foo"

那么

location

对象将如下所示：

{
    "pathname": "/testpath/123",
    "search": "",
    "hash": "#foo",
    "state": null,
    "key": "r7bfxju4"
}

{
    "ancestorOrigins": {
        "0": "https://...."
    },
    "href": "https://..../#/testpath/123#foo",
    "origin": "https://....",
    "protocol": "https:",
    "host": "....",
    "hostname": "....",
    "port": "",
    "pathname": "/",
    "search": "",
    "hash": "#/testpath/123#foo"
}

请注意，现在唯一的区别是

"foo"

现在是

location

对象的一部分，即应用程序路由器正在使用的路由路径的“哈希”。它也包含在

window.location

的哈希值中，例如first 哈希之后的所有内容。

将其包裹起来时

useLocation

的行为是否有所不同

<BrowserRouter>

vs

<HashRouter>

vs

<MemoryRouter>

等等？

不，不是真的。这些路由器都管理和/或维护它们自己的内部历史对象和状态，例如

location

在每种情况下是什么。

BrowserRouter

将内部路由/导航操作耦合到浏览器的 DOM，类似地，

HashRouter

使用 just 有效静态位置的哈希值，例如从服务器上的特定目录托管/提供服务的应用程序。

MemoryRouter

旨在用于非 DOM 环境，例如Jest 测试等节点环境

我不认为这里存在要归档的错误或问题，因为考虑到您使用的

HashRouter

和控制台日志记录，您描述的所有内容似乎都是合理的行为。