React router v4 несколько строк запроса

как добавить несколько строк запроса? Я нигде не могу найти ответ на реакцию на маршрутизатор 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>                
      )
    }

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
1 968
3

Ответы 3

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

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

import queryString from 'query-string';
...
{ search: queryString.stringify({ sort: 'price-high', page: 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.info(getQueryString(testObject1))
console.info(getQueryString(testObject2))
console.info(getQueryString(testObject3))

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

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-адрес (в моем случае две разные строки запроса, страница и сортировка)

Другие вопросы по теме