无法获取查询字符串：路径名已填充，但搜索为空

我正在使用 React Router + Redux + Redux saga。我访问作为 props 传递给我的组件的位置对象，在其中我尝试获取 URL 的查询字符串部分。

然而，位置的搜索参数始终为空。尽管如此，路径名仍按如下方式填充：

{pathname: "/view/energy?latitude=34.06012&longitude=-118.26997&zoom=11", search: "", hash: "", key: "wsbbq0"}

任何帮助或调试提示都值得赞赏。谢谢！

库版本：

"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"redux-saga": "^1.1.3"

Index

ReactDOM.render(
   <Provider store={store}>
      <Router>
         <Route path="/" component={App} />
         <Route path="/view/:viewId" component={App} />
      </Router>
   </Provider>,
   document.getElementById('root'));

根据location https://reacttraining.com/react-router/web/api/location it 应该有将您的网址拆分为

{
  pathname: "/view/energy",
  search: "?latitude=34.06012&longitude=-118.26997&zoom=11",
  hash: "",
  key: "wsbbq0"
}

但这并没有发生。

它没有发生的原因是因为您正在使用to对象形式并已指定 queryString 作为pathname属性，然后显式指定一个空字符串search财产。尽管如此，请考虑以下方式导航到路径名+搜索：

•  <Link to="/view/energy?latitude=34.06012&longitude=-118.26997&zoom=11">
     View Energy
   </Link>
  

  正确地将目标路径字符串解析为其组成部分：

  {
    "pathname": "/view/energy",
    "search": "?latitude=34.06012&longitude=-118.26997&zoom=11",
    "hash": "",
    "key": "qje5v8"
  }
  

•  <Link
     to={{
       pathname:
         "/view/energy?latitude=34.06012&longitude=-118.26997&zoom=11"
     }}
   >
     View Energy
   </Link>
  

  无法分离查询字符串：

  {
    "pathname": "/view/energy?latitude=34.06012&longitude=-118.26997&zoom=11",
    "search": "", // <-- empty string
    "hash": "",
    "key": "f6eqol"
  }
  

•  <Link
     to={{
       pathname: "/view/energy",
       search: "?latitude=34.06012&longitude=-118.26997&zoom=11"
     }}
   >
     View Energy
   </Link>
  

  正确维护目标路径对象的组成部分：

  {
    "pathname": "/view/energy",
    "search": "?latitude=34.06012&longitude=-118.26997&zoom=11",
    "hash": "",
    "key": "9qlzx8"
  }