Creadno lista pero con problemas en paginate

src/components/Paginate.jsx

@@ -19,7 +19,7 @@ const range = (from, to, step = 1) => {
     return range;
 }
 
-export class Paginate extends Component {
+export default class Paginate extends Component {
     constructor(props) {
         super(props);
         const {totalRecords = 0, pageLimit = 30, pageNeighbours = 0, currentPage = 1} = props;
@@ -135,24 +135,21 @@ export class Paginate extends Component {
         const blocks = pages.map((page, index) => {
             if (page === LEFT_PAGE) return (
                 <li key={page} className="page-item">
-                    <a className="page-link" href={this.makePageLink(this.state.currentPage - 1)}
-                       onClick={this.handleMoveLeft}>
+                    <a className="page-link" href={this.makePageLink(this.state.currentPage - 1)} onClick={this.handleMoveLeft}>
                         <span>&laquo; Anterior</span>
                     </a>
                 </li>
             );
             if (page === RIGHT_PAGE) return (
                 <li key={page} className="page-item">
-                    <a className="page-link" href={this.makePageLink(this.state.currentPage + 1)}
-                       onClick={this.handleMoveRight}>
+                    <a className="page-link" href={this.makePageLink(this.state.currentPage + 1)} onClick={this.handleMoveRight}>
                         <span>Siguiente &raquo;</span>
                     </a>
                 </li>
             );
             return (
                 <li key={page} className={`page-item ${currentPage === page ? 'active' : ''}`}>
-                    <a className="page-link" href={this.makePageLink(index)}
-                       onClick={this.handleClick(page)}>{page}</a>
+                    <a className="page-link" href={this.makePageLink(page)} onClick={this.handleClick(page)}>{page}</a>
                 </li>
             );
         })

src/components/Search.jsx

@@ -1,15 +1,34 @@
 import React, {Fragment} from "react";
 import queryString from "query-string";
 import ReactJson from "react-json-view";
+
 import {searchArtist} from "../services/search_service";
 import SearchBar from "./SearchBar";
-import {Paginate} from "./Paginate";
+import Paginate from "./Paginate";
+import {Link, navigate} from "@reach/router";
 
+class SearchArtist extends React.Component {
+    render() {
+        const artist = this.props.artist;
+        return (
+            <li className='entity'>
+                <Link to={`/artist/${artist.id}`}>
+                    <span>{artist.name}</span>
+                    <span className='small'>{[artist.type, artist.country].filter(Boolean).join(' - ')}</span>
+                </Link>
+            </li>
+        )
+    }
+}
 
-const SearchList = () => (
-    <div>
-    </div>
-);
+class SearchList extends React.Component {
+    render() {
+        const artists = this.props.artists;
+        return <ul className='entity_list'>
+            {artists.map((artist) => <SearchArtist key={artist.id} artist={artist}/>)}
+        </ul>
+    }
+}
 
 export class Search extends React.Component {
     constructor(props) {
@@ -31,23 +50,15 @@ export class Search extends React.Component {
         this.loadArtists(this.state.params.query, this.state.params.page);
     }
 
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        if (prevState.params !== this.state.params) {
-            this.loadArtists(this.state.params.query, this.state.params.page);
-        }
-    }
-
     makeLink(page) {
         return `/search?query=${this.state.params.query}&page=${page}`
     }
 
-    handlePageChange(page) {
-        this.props.navigate(page).then(() => {
-            this.setState({
-                artists: null,
-                params: this.loadParams()
-            });
-        })
+    async handlePageChange(page) {
+        await navigate(page)
+        this.setState({params: this.loadParams()}, () => {
+            this.loadArtists(this.state.params.query, this.state.params.page);
+        });
     }
 
     handleQueryChange(query) {
@@ -88,7 +99,11 @@ export class Search extends React.Component {
     }
 
     loadParams() {
-        return queryString.parse(this.props.location.search);
+        const parsed = queryString.parse(this.props.location.search);
+        return {
+            query: parsed.query,
+            page: parsed.page
+        }
     }
 
     loadArtists(query, page) {