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





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