Unable to get query string: pathname is filled but search is empty

user_1681523 0
Viewed 1399

I'm using react router + redux + redux saga. I access the location object passed as props to my component, where I try to get the query string part of the URL.

However, the search parameter of location is always empty. Nonetheless the pathname is filled as follows:

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

Any help or debug tip is appreciated. Thanks!

Libs versions:

"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'));
react-router-dom reactjs
1 Answers

react-router-dom: match

A match object contains information about how a matched the URL. match objects contain the following properties:

  • params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
  • isExact - (boolean) true if the entire URL was matched (no trailing characters)
  • path - (string) The path pattern used to match. Useful for building nested s
  • url - (string) The matched portion of the URL. Useful for building nested s

The params is the object you seek. props.match.params

If you happen to be using a functional component you may also use the useParams hook, but since you directly render as a route component App will have a match prop already.

According to location it should have split your url into

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

but that didn't occur. (not sure why, would have to dig deeper)

user_86908570
Related