How do you programmatically update query params in react-router

Question

I can t seem to find how to update query params with react-router without using  lt Link  gt   hashHistory push url  doesn t seem to register query params  and it doesn t seem like you can pass a query object or anything as a second argument   How do you change the url from  shop Clothes dresses to  shop Clothes dresses color blue in react-router without using  lt Link gt     And is an onChange function really the only way to listen for query changes  Why aren t query changes automatically detected and reacted-to the way that param changes are

User · Accepted Answer

Within the push method of hashHistory  you can specify your query parameters  For instance    history push     pathname    dresses     search    color blue       or  history push   dresses color blue     You can check out this repository for additional examples on using history

User · Answer

I prefer you to use below function that is ES6 style   getQueryStringParams   query   gt        return query                    test query    query slice 1    query               split   amp                 reduce  params  param    gt                        let  key  value    param split                           params key    value   decodeURIComponent value replace     g                                  return params

User · Answer

From DimitriDushkin on GitHub   import   browserHistory   from  react-router            param  Object  query     export const addQuery    query    gt      const location   Object assign     browserHistory getCurrentLocation        Object assign location query  query        or simple replace location query if you want to completely change params    browserHistory push location               param     String  queryNames     export const removeQuery       queryNames    gt      const location   Object assign     browserHistory getCurrentLocation       queryNames forEach q   gt  delete location query q      browserHistory push location        or  import   withRouter   from  react-router   import   addQuery  removeQuery   from        utils utils-router    function SomeComponent   location        return  lt div style    backgroundColor  location query paintRed     f00      fff     gt       lt button onClick        gt  addQuery   paintRed  1     gt Paint red lt  button gt       lt button onClick        gt  removeQuery  paintRed    gt Paint white lt  button gt     lt  div gt      export default withRouter SomeComponent

User · Answer

Using query-string module is the recommended one when you need a module to parse your query string in ease      http   localhost 3000 token xxx-xxx-xxx   componentWillMount         var query   queryString parse this props location search       if  query token            window localStorage setItem  jwt   query token           store dispatch push                  Here  I am redirecting back to my client from Node js server after successful Google-Passport authentication  which is redirecting back with token as query param   I am parsing it with query-string module  saving it and updating the query params in the url with push from react-router-redux

User · Answer

John s answer is correct  When I m dealing with params I also need URLSearchParams interface   this props history push       pathname    client       search        new URLSearchParams  clientId  clientId   toString        You might also need to wrap your component with a withRouter HOC eg  export default withRouter YourComponent

User · Answer

It can also be written this way   this props history push    window location pathname  amp page   pageNumber

User · Answer

for react-router v4 3      const addQuery    key  value    gt      let pathname   props location pathname       returns path    app books    let searchParams   new URLSearchParams props location search        returns the existing query string    type fiction amp author fahid    searchParams set key  value     this props history push              pathname  pathname             search  searchParams toString                   const removeQuery    key    gt      let pathname   props location pathname       returns path    app books    let searchParams   new URLSearchParams props location search        returns the existing query string    type fiction amp author fahid    searchParams delete key     this props history push              pathname  pathname             search  searchParams toString                              function SomeComponent   location         return  lt div gt        lt button onClick        gt  addQuery  book    react    gt search react books lt  button gt        lt button onClick        gt  removeQuery  book    gt remove search lt  button gt      lt  div gt                  To know more on URLSearchParams from   Mozilla   1    var paramsString    q URLUtils searchParams amp topic api    var searchParams   new URLSearchParams paramsString       Iterate the search parameters   for  let p of searchParams       console log p        searchParams has  topic       true     true  searchParams get  topic        api      true  searchParams getAll  topic         api    searchParams get  foo       null     true  searchParams append  topic    webdev     searchParams toString        q URLUtils searchParams amp topic api amp topic webdev   searchParams set  topic    More webdev     searchParams toString        q URLUtils searchParams amp topic More webdev   searchParams delete  topic     searchParams toString        q URLUtils searchParams     1   https   developer mozilla org en-US docs Web API URLSearchParams

User · Answer

Example using react-router v4  redux-thunk and react-router-redux 5 0 0-alpha 6  package   When user uses search feature  I want him to be able to send url link for same query to a colleague   import   push   from  react-router-redux   import qs from  query-string    export const search        gt   dispatch    gt        const query     firstName   John   lastName   Doe            API call to retrieve records                const searchString   qs stringify query        dispatch push           search  searchString

[reactjs] How do you programmatically update query params in react-router?

Examples related to reactjs

Examples related to react-router