React 中分页页面的唯一 url

Posted 2023-03-10

【中文标题】React 中分页页面的唯一 url

【英文标题】：Unique url for pagination pages in React

【发布时间】：2017-10-26 04:48:01

【问题描述】：

我需要分页页面的唯一网址。

当我点击分页中的页数时 - url 改变了，比如 .../album/1/page/(number of selected page) - 没关系，但是当我尝试复制我的网址并将其粘贴为 (.../album/1/page/2)，我的应用仍会加载第一页。

我需要机会从 url 加载任何页面。

这是我此刻的路线：

<Route path="album/:id" component=AlbumsShow>
    <Route path="page/:newPage" component=AlbumsShow />
</Route>

这是组件：

import React, Component from 'react';
import connect from 'react-redux';
import Pager from 'react-pager';
import browserHistory from 'react-router';

class AlbumsShow extends Component 
    constructor(props) 
        super(props);
        this.renderImage = this.renderImage.bind(this);
        this.handlePageChanged = this.handlePageChanged.bind(this);

        this.state = 
            total:       3,
            current:     0,
            visiblePage: 2,
        ;
    

    handlePageChanged(newPage) 
        this.setState( current : newPage );
        browserHistory.push(
                pathname: (newPage+1),
            );
    

    renderImage() 
        const imgs = this.props.images.length > 10 ?
              this.props.images.slice(this.state.current * 10, (this.state.current + 1) * 10) :
              this.props.images;
                return imgs.map((image, page) => (
                  <li className="image_list" key=image.id>
                    <img className="image_list_img"  src=image.img />
                  </li>
        ));
    

    render() 
        return (
            <div className="wrapper">
              <ul>
                this.renderImage()
              </ul>

              this.props.images.length > 10 ?

                <Pager
                  total=this.state.total
                  current=this.state.current
                  visiblePages=this.state.visiblePage
                  titles= first: 'First page', last: 'Last page' 
                  onPageChanged=this.handlePageChanged 
                /> : null
              
            </div>
        );
    


function mapStateToProps(state, ownProps) 
    const currentAlbumId = parseInt(ownProps.params.id, 10);

    return 
        images: state.main.albums.filter(album => album.id === currentAlbumId)[0].images,
    ;

export default connect(mapStateToProps)(AlbumsShow);

【参考方案1】：

请使用路由道具中的页码，即:newPage，并将其映射到mapStateToProps 中为pageNumber（可选）。

function mapStateToProps(state, ownProps) 
  const currentAlbumId = parseInt(ownProps.params.id, 10);
  const pageNumber = parseInt(ownProps.params.newPage, 10);

  return 
      pageNumber,
      images: state.main.albums.filter(album => album.id === currentAlbumId)[0].images,
  ;

然后，不要将页码存储在组件的状态中，而是将其作为道具使用。

<Pager current=this.props.pageNumber ... />

在处理跳转到下一页时，只需通知您的路由器，不要自行存储状态。您的组件将使用新的 pageNumber 值重新呈现。

handlePageChanged(newPage) 
    const  id  = this.props.params
    const  pageNumber  = this.props

    const target = `/albums/$id/page/$pageNumber + 1`

    browserHistory.push(
        pathname: target,
    );

一路向下，将出现的this.state.current 更改为this.props.pageNumber，一切顺利。

URL 现在变成了single source of truth。

---

注意：您可以更改路由参数以更好地匹配它们的含义：

<Route path="album/:albumId" component=AlbumsShow>
    <Route path="page/:pageIndex" component=AlbumsShow />
</Route>

之后，您只需使用这些 id 而无需映射：

const  albumId, pageIndex  = this.props.params

【讨论】：

当我按照你的建议更改当前 current=this.props.pageNumber - 我的分页数字消失了。

您是否在mapStateToProps 或其他地方传递了当前pageNumber？检查它是否已定义或将其分配给默认值：const pageNumber = ownProps.params.newPage || 1。如果这不起作用，请在更改后向我显示代码。

您可以使用原始路由道具newPage 作为this.props.params.newPage，而不是使用重命名的页码。然后代码将如下所示：current=this.props.params.newPage。请记住更改代码中的所有出现以说明此更改。

不幸的是，它不起作用。请问可以加我聊天吗？我想明白到底。​​span>

不知道怎么在这里聊天，但是我已经创建了a fiddle - take a look how the code might look like。

【参考方案2】：

您可以检查componentWillReceiveProps 中的page 参数并将其设置为current 状态，然后更新Pager 组件。

componentWillReceiveProps(newProps) 
  const  newPage  = newProps.params;
  if (newPage !== this.state.current) 
    this.setState( current: page );
  

【讨论】：

这可能会导致无限循环。我认为有一个标志来检查当前参数是否与以前不同并且仅在参数为新参数时重新渲染是很重要的。

@promisified 是的，谢谢，忘记在此处填写if 声明！