Fixed problem while 'reloading' a page with different route params not making the server to be hit

src/short-urls/Paginator.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
 import { connect } from 'react-redux';
-import { updateShortUrlsList } from './reducers/shortUrlsList';
 
 export class Paginator extends React.Component {
   render() {
@@ -21,7 +20,6 @@ export class Paginator extends React.Component {
             <PaginationLink
               tag={Link}
               to={`/server/${serverId}/list-short-urls/${i}`}
-              onClick={() => this.updatePage(i)}
             >
               {i}
             </PaginationLink>
@@ -39,7 +37,6 @@ export class Paginator extends React.Component {
             previous
             tag={Link}
             to={`/server/${serverId}/list-short-urls/${currentPage - 1}`}
-            onClick={() => this.updatePage(currentPage - 1)}
           />
         </PaginationItem>
         {renderPages()}
@@ -48,18 +45,11 @@ export class Paginator extends React.Component {
             next
             tag={Link}
             to={`/server/${serverId}/list-short-urls/${currentPage + 1}`}
-            onClick={() => this.updatePage(currentPage + 1)}
           />
         </PaginationItem>
       </Pagination>
     );
   }
-
-  updatePage(page) {
-    this.props.updateShortUrlsList({ ...this.props.shortUrlsListParams, page })
-  }
 }
 
-export default connect(state => ({
+export default connect()(Paginator);
-  shortUrlsListParams: state.shortUrlsListParams,
-}), { updateShortUrlsList })(Paginator);

src/short-urls/ShortUrls.js

@@ -6,10 +6,14 @@ import './ShortUrls.scss';
 import ShortUrlsList from './ShortUrlsList';
 
 export function ShortUrls(props) {
+  const { match: { params } } = props;
+  // Using a key on a component makes react to create a new instance every time the key changes
+  const urlsListKey = `${params.serverId}_${params.page}`;
+
   return (
     <div className="short-urls-container">
       <div className="form-group"><SearchBar /></div>
-      <ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} />
+      <ShortUrlsList {...props} shortUrlsList={props.shortUrlsList.data || []} key={urlsListKey} />
       <Paginator paginator={props.shortUrlsList.pagination} serverId={props.match.params.serverId} />
     </div>
   );