Ahora entiendo todo

Tuve que hacer bastante para poder entender como funciona esta cosa,
creo

Resulta que no tengo que joder con las querystrings todo el tiempo, solo
cuando cargo la pagina, de ahi en adelante puedo manejar todo con el
estado y puedo hacer history.pushstate para mostrarle a los usuarios un
link al que pueden acceder y estaran en la misma pagina

por todo esto, ahora ya leo solo la query string al princio y
internamente me manejo con el estado que me da searchbar y navigate, uno
me da una query y el otro me da un page number

de aqui en adelante deberia ir mas facil la cosa

PD: ojala my super mega setup de continuous delivery pueda con mis
modificaciones

src/components/Nav.jsx

@@ -1,14 +1,14 @@
 import React from "react";
-import {Link} from "@reach/router";
+import {Link} from "react-router-dom";
 
 export class Nav extends React.Component {
     render() {
         return (
             <nav className='nav'>
-                <Link to={'/'}><h1>MusicList</h1></Link>
+                <Link to='/'><h1>MusicList</h1></Link>
                 <ul className='nav-links'>
-                    <li className='link'><a href='/login'>Iniciar Sesion</a></li>
-                    <li className='link'><a href='/signup'>Registrate</a></li>
+                    <li className='link'><Link to='/login'>Iniciar Sesion</Link></li>
+                    <li className='link'><Link to='/signup'>Registrate</Link></li>
                 </ul>
             </nav>
         )

src/components/Paginate.jsx

@@ -43,7 +43,7 @@ export default class Paginate extends Component {
     gotoPage(page) {
         const {onPageChanged = f => f} = this.props;
         const currentPage = Math.max(0, Math.min(page, this.totalPages));
-        this.setState({currentPage: currentPage}, () => onPageChanged(this.makePageLink(currentPage)));
+        this.setState({currentPage: currentPage}, () => onPageChanged(page));
     }
 
     handleClick(page) {

src/components/Search.jsx

@@ -5,7 +5,7 @@ import ReactJson from "react-json-view";
 import {searchArtist} from "../services/search_service";
 import SearchBar from "./SearchBar";
 import Paginate from "./Paginate";
-import {Link, navigate} from "@reach/router";
+import {Link} from "react-router-dom";
 
 class SearchArtist extends React.Component {
     render() {
@@ -34,35 +34,41 @@ export class Search extends React.Component {
     constructor(props) {
         super(props);
 
-        this.loadParams = this.loadParams.bind(this);
         this.makeLink = this.makeLink.bind(this);
         this.handlePageChange = this.handlePageChange.bind(this);
         this.handleQueryChange = this.handleQueryChange.bind(this);
 
+        const parsed = queryString.parse(this.props.location.search);
+
         this.state = {
             artists: null,
             paginate: null,
-            params: this.loadParams()
+            query: parsed.query,
+            page: !isNaN(+parsed.page) ? +parsed.page : 1,
         };
     }
 
     componentDidMount() {
-        this.loadArtists(this.state.params.query, this.state.params.page);
+        this.loadArtists(this.state.query, this.state.page);
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if(prevState.query !== this.state.query  || prevState.page !== this.state.page){
+            this.loadArtists(this.state.query, this.state.page);
+        }
     }
 
     makeLink(page) {
-        return `/search?query=${this.state.params.query}&page=${page}`
+        return `/search?query=${this.state.query}&page=${page}`
     }
 
-    async handlePageChange(page) {
-        await navigate(page)
-        this.setState({params: this.loadParams()}, () => {
-            this.loadArtists(this.state.params.query, this.state.params.page);
-        });
+    handlePageChange(page) {
+        this.props.history.push(this.makeLink(page));
+        this.setState({page: page});
     }
 
     handleQueryChange(query) {
-        this.setState({artists: null, paginate: null, params: this.loadParams()})
+        this.setState({query: query, page: 1});
     }
 
     render() {
@@ -74,9 +80,8 @@ export class Search extends React.Component {
             const currentPage = this.state.paginate.current_page;
             const pageLimit = this.state.paginate.per_page;
 
-            paginate = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage}
-                                 pageNeighbours={2} onPageChanged={this.handlePageChange}
-                                 makeLink={this.makeLink}/>
+            paginate = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2}
+                                 onPageChanged={this.handlePageChange} makeLink={this.makeLink}/>
         }
 
         if (this.state.artists) {
@@ -91,21 +96,13 @@ export class Search extends React.Component {
         return (
             <main>
                 <h1>Busqueda</h1>
-                <SearchBar query={this.state.params.query} onQueryChanged={this.handleQueryChange}/>
+                <SearchBar query={this.state.query} onQueryChanged={this.handleQueryChange} history={this.props.history}/>
                 {paginate && paginate}
                 {artists ? artists : <p>Loading...</p>}
             </main>
         );
     }
 
-    loadParams() {
-        const parsed = queryString.parse(this.props.location.search);
-        return {
-            query: parsed.query,
-            page: parsed.page
-        }
-    }
-
     loadArtists(query, page) {
         if (!page) {
             page = 1;

src/components/SearchBar.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import {FaSearch} from 'react-icons/fa';
-import {navigate} from "@reach/router";
 
 export default class SearchBar extends React.Component {
     constructor(props) {
@@ -23,9 +22,8 @@ export default class SearchBar extends React.Component {
             const query = this.state.query;
             const onQueryChanged = this.props.onQueryChanged;
 
-            navigate(`/search?query=${query}`).then(() => {
-                if(onQueryChanged) onQueryChanged(query)
-            });
+            this.props.history.push(`/search?query=${query}`)
+            if(onQueryChanged) onQueryChanged(query)
         }
     }