react router v4 multiple query strings

Question

how do i append multiple query strings? i cant find an answer for react router v4 anywhere.

right now i only get www.example.com/products?sort=newest or www.example.com/products?page=1

and what i am trying to get is something like www.example.com/products?sort=newest&page=1

Thank you in advance

class CategoriesChild extends React.Component {
  componentWillMount() {
    const values = queryString.parse(this.props.location.search)
    this.props.startSetProductsCategoryChildren(this.props.match.params.category, values.page, values.sort)
  }

  renderProducts () {
    const { props } = this;
      return (
                <h2>{this.props.categoryName}</h2>
                <p>You can sort and filter on the section to the right.</p>
              </div>

              <div className="profile-options-content">
                {
                  this.props.products.length === 0 ?
                  <p style={{textAlign: 'center', opacity: '0.5', marginTop: '50px'}}><i>There is no products in this category just yet!</i></p> :
                  this.props.products.map((product) => {
                    return <ProductListItemMore key={product._id} {...product} />
                  })
                }
                <div className="pagination" >
                  <div className="pagination-bar">
                    {
                      this.props.products.length === 0 ?
                      '' :
                      Array(this.props.pages).fill(0).map((e,i) => {
                        return <Link to={{
                          pathname: `${this.props.match.url}`,
                          search: `&page=${i+1}`
                        }} key={i+1} >{i+1}</Link>
                      })
                    }
                  </div>
                  </div>
              </div>
            </div>     

              <div className="profile-settings-container">
                <div className="profile-settings-container-sort">
                  <h3>Sort</h3>
                  <Link to={{
                    pathname: `${this.props.match.url}`,
                    search: '?sort=newest'
                  }} className="profile-link-button">Newest</Link>
                  <Link to={{
                    pathname: `${this.props.match.url}`,
                    search: '?sort=oldest'
                  }} className="profile-link-button">Oldest</Link>
                  <Link to={{
                    pathname: `${this.props.match.url}`,
                    search: '?sort=price-high'
                  }} className="profile-link-button">Highest Price</Link>
                  <Link to={{
                    pathname: `${this.props.match.url}`,
                    search: '?sort=price-low'
                  }} className="profile-link-button">Lowest Price</Link>
                </div>
              </div>                
      )
    }

post mostly code... i dont know what more to write... i added all the details...

Answer 1

thank you guys, it finally clicked! i found this comment from mjackson where he showed the example that i used to solve my problem

this.props.push({
  pathname: this.props.location.pathname,
  search: stringifyQuery(Object.assign({}, parseQueryString(this.props.location.search), { foo: "bar" }))
});

so i changed it a bit and got this

<Link to={{
     pathname: this.props.location.pathname,
     search: queryString.stringify(Object.assign({}, queryString.parse(this.props.location.search), { sort: 'newest' }))
}}>Newest</Link>

and now it works perfectly, it adds multiple query strings in the url (in my case two different query strings, page and sort)

Answer 2

I think the discussion here worth a look, but feel free to jump to @mjackson comment and see if this would solve your issue https://github.com/ReactTraining/react-router/issues/4410.

But just to be clear, currently I see you write:

<Link to={{
   pathname: `${this.props.match.url}`,
   search: '?sort=newest'
}} className="profile-link-button">Newest</Link>

what is exactly the problem with converting

search: '?sort=newest'

to

search: '?sort=newest&page=1'

.. or you mean you'd like something more dynamic maybe like this:

const getQueryString = (queryParams) => 
  Object.keys(queryParams).reduce(
    (string, currentKey) => `${string}${currentKey}=${queryParams[currentKey]}&`,
    '?'
  ).slice(0, -1)

const testObject1 = {
  query1: "something",
  query2: "otherthing",
  query3: "meh",
}

const testObject2 = {
  query1: "something"
}

const testObject3 = {}

console.log(getQueryString(testObject1))
console.log(getQueryString(testObject2))
console.log(getQueryString(testObject3))

Answer 3

You just constructor it yourself: search: '?sort=price-high&page=1'.

If you have several query parameters, you can use the query-string library to make it easier/cleaner:

import queryString from 'query-string';
...
{ search: queryString.stringify({ sort: 'price-high', page: 1 }) }