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

但是要明确，目前我看到你写道：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div></div>
    <image src="https://cdn.dribbble.com/users/77760/screenshots/2042501/attachments/363345/potato-4.jpg"></image>

转换

的问题究竟是什么？

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

到

search: '?sort=newest'

..或者你的意思是你喜欢更有活力的东西，可能是这样的：

＆＃13;

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

＆＃13;

Answer 2

你自己构建它：search: '?sort=price-high&page=1'。

如果您有多个查询参数，可以使用query-string库使其更容易/更清洁：

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

Answer 3

谢谢你们，终于点击了！我从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中添加了多个查询字符串（在我的例子中是两个不同的查询字符串，页面和排序）

路由器v4多个查询字符串

3 个答案: