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("?")[];

    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;