reactjs - React Router v4 多个查询字符串

Question

如何附加多个查询字符串？我无法在任何地方找到 React Router 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

您只需自己构造它:search: '?sort=price-high&page=1'。

如果您有多个查询参数，则可以使用 query-string库，使其更容易/更干净:

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