Unique url for pagination pages in React

Viewed 8751

I need unique url for pages of pagination.

When I click to number of page in pagination - url is changed, like .../album/1/page/(number of choosen page) - and it is ok, but when I try to copy my url and paste it like (.../album/1/page/2), my app still load first page.

I need opportunity to load any pages from url.

This is my route for this moment:

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

And this is component:

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" alt="item" 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);
2 Answers
Related