реагировать на несколько строк запроса router v4

Question

как мне добавить несколько строк запроса? я не могу найти ответ для реакции маршрутизатора v4 в любом месте.

сейчас я получаю только www.example.com/products?sort=newest или www.example.com/products?page=1

и я пытаюсь получить что-то вроде www.example.com/products?sort=newest&page=1

Заранее спасибо

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>                
      )
    }

публиковать в основном код ... я не знаю, что еще написать ... я добавил все детали ...

Answer 1

Я думаю, что обсуждение здесь стоит посмотреть, но не стесняйтесь перейти к комментарию @mjackson и посмотреть, решит ли это вашу проблему https://github.com/ReactTraining/react-router/issues/4410.

Но, чтобы прояснить ситуацию, сейчас я вижу, что вы пишете:

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

в чем именно проблема с конвертацией

search: '?sort=newest'

до

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

.. или вы хотите сказать, что вы хотите что-то более динамичное, например:

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 2

спасибо, ребята, наконец-то щелкнули я нашел этот комментарий от Мьяксона, где он показал пример, который я использовал для решения своей проблемы

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

так что я немного изменил и получил это

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

и теперь он работает отлично, он добавляет несколько строк запроса в URL (в моем случае две разные строки запроса, страницу и сортировку)

Answer 3

Вы просто создаете его сами: search: '?sort=price-high&page=1'.

Если у вас есть несколько параметров запроса, вы можете использовать библиотеку query-string , чтобы сделать ее проще / чище:

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