Javascript Use Location位置成员在HashRouter内为空

当使用HashRouter时，以及在使用useLocation的组件中， window.location对象和window.location对象之间存在差异 useLocation个对象中的location个.

当我写这篇文章时，我注意到周围可能有一个困惑 useLocation实际指向的是什么.从pathname开始 useLocation似乎实际上是window.location.hash个没有 第#号.但哈希似乎根本没有指向任何东西.

HashRouter路由使用在URL的101哈希之后定义的路径.

例如，给定:

• 路由:<Route path="/testpath/123" element={....} />
• 网址:"https://..../#/testpath/123"

从useLocation挂钩返回的location可能如下所示:

{
    "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对象的一部分，location对象是应用程序路由使用的路由路径的"散列".它也包含在window.location的散列中，例如first散列之后的所有内容.

当你把useLocation包起来时，它的表现会不同吗？ <BrowserRouter>比<HashRouter>比<MemoryRouter>，等等？

还没呢.这些路由都管理和/或维护它们自己的内部历史对象和状态，例如location在每个上下文中是什么.BrowserRouter将内部路由/导航动作耦合到浏览器的DOM，并且类似地，HashRouter使用104实际上是静态位置的内容的散列，例如，从服务器上的特定目录托管/提供的apply.MemoryRouter旨在用于非DOM环境，例如Jest测试等Node环境.

根据您使用的路由以及URL路径/etc值的不同，location个属性中的一些可能没有设置，但useLocation钩子和location对象基本上是相同的.

我认为这里没有错误或问题，因为考虑到您使用的HashRouter和控制台日志(log)记录，您描述的一切似乎都是合理的行为.