Pagination con props y scroll to the top

src/components/Artist.jsx

@@ -2,6 +2,10 @@ import React, {useEffect, useState} from 'react'
 import {getArtist, getArtistDiscs} from "../services/entity_service";
 import {CoverWithCaption} from './CoverArt';
 import {Paginate} from "./Paginate";
+import queryString from "query-string";
+
+import {useLocation} from 'react-router-dom';
+
 
 export const Discs = (props) => {
     const discs = props.discs ? props.discs : null;
@@ -38,7 +42,7 @@ export const Discs = (props) => {
         const currentPage = paginate.current_page;
         const pageLimit = paginate.per_page;
 
-        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChanged} makeLink={() => ('#')}/>
+        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
     }
 
     return (
@@ -75,37 +79,51 @@ export const Artist = (props) => {
 }
 
 export const ArtistView = (props) => {
+    const {pathname} = useLocation();
+
+    const parsedParams = queryString.parse(props.location.search);
+
     const [artist, setArtist] = useState(null);
     const [discs, setDiscs] = useState(null);
     const [discsPaginate, setDiscsPaginate] = useState(null);
+    const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
 
     const mbid = props.match.params.mbid;
 
     useEffect(() => {
         if (mbid) {
             getArtist(mbid).then((result) => setArtist(result));
-            getArtistDiscs(mbid, 1, 16).then((result) => {
+            getArtistDiscs(mbid, page, 16).then((result) => {
                 setDiscs(result.discs);
                 setDiscsPaginate(result.paginate);
             });
         }
-    }, [mbid])
+    }, [mbid, page])
+
+    useEffect(() => {
+        document.getElementById('root').scrollIntoView({behavior: 'smooth'});
+    }, [pathname]);
+
+    const makeLink = (page) => {
+        return `/artist/${mbid}?page=${page}`;
+    }
 
     const handleDiscPageChanged = (page) => {
         setDiscs(null);
+        setPage(page);
+
         getArtistDiscs(mbid, page, 16).then((result) => {
             setDiscs(result.discs);
             setDiscsPaginate(result.paginate);
         });
-
         document.getElementById('root').scrollIntoView({behavior: 'smooth'});
+        props.history.push(makeLink(page));
     }
 
     return (
         <div className='artist-view'>
             <Artist artist={artist}/>
-            <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged}/>
-            {!mbid && <p>AHH</p>}
+            <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink}/>
         </div>
     );
 }