[React] Use the URL as the source of truth in React

import React from "react";
import { render } from "react-dom";
import { withRouter } from "react-router";
import { HashRouter, Route, Switch } from ‘react-router-dom‘;
import Search from "./Search";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

// Step 1
const App = withRouter(() => (
  <div style={styles}>
    <Switch>
      <Route exact path="/" component={Search} />
    </Switch>
  </div>
));

render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById("root")
);


-----------------------


import React, { Component } from "react";

const baseUrl = "https://jsonplaceholder.typicode.com/posts";

class Hello extends Component {
  state = {
    results: []
  };

  // Step 2
  componentDidMount() {
    const queryString = this.props.location.search;

    if (queryString) {
      this.fetch(queryString);
    }
  }

  // Step 3
  componentWillReceiveProps({ location }) {
    const oldQueryString = this.props.location.search;
    const queryString = location.search;

    if (oldQueryString !== queryString) {
      this.fetch(queryString);
    }
  }

  fetch = (queryString = "") => {
    fetch(`${baseUrl}${queryString}`)
      .then(res => res.json())
      .then(results => this.setState({ results }));
  };

  handleChange = ev => {
    const { value } = this.input;
    const queryString = value ? `?q=${value}` : "";
    const currentUrl = window.location.href.split("?")[0];
    window.location = `${currentUrl}${queryString}`;
  };

  render() {
    return (
      <div>
        <input ref={input => (this.input = input)} onBlur={this.handleChange} />
        <br />
        {this.state.results.map((res, i) => <p key={i}>{res.title}</p>)}
      </div>
    );
  }
}

export default Hello;