How to get rid of this ? from the url

Question

I'm making a react application and whenever I search for something(eg cat) on the homepage, the url changes to search/cat and the forward, backward button work normally & help me switch between the homepage and the cat search page ...but when i search for something again (eg rat) after(homepage->cat) so the url changes to search/rat? and now when i press the back button the url changes to search/rat and i'm on the same page then if i press back button again the url becomes search/cat but the page still has the results of the rat search and if i press back again ,the homepage appears..why is this happening?I think it's because of the ? that appears at the end of the url..Please help

after searching cat after searching for rat after pressing the back button after pressing the back button after pressing the back button

This is the code of the search bar

import React, { Component } from "react";
import "./styles/searchBar.scss";
import "font-awesome/css/font-awesome.min.css";
import { withRouter } from "react-router-dom";
import SearchForm from "./SearchForm";
import { connect } from "react-redux";
import { fetchRandomPhotos } from "../redux/actions/randomPhotoAction";
class SearchBar extends Component {
  state = {
    searchQuery: "",
  };

  componentDidMount() {
    this.props.fetchRandomPhotos();
  }

  handleChange = (event) => {
    this.setState({ searchQuery: event.target.value });
  };

  handleSubmit = (event) => {
    //event.preventDefault();
    this.props.history.push(`/search/${this.state.searchQuery}`);
  };

  handleProfile = () => {
    this.props.history.push(`/public/${this.props.photo.user.username}`);
  };

  render() {
    const { photo } = this.props;
    return !photo ? (
      <div className="search-bar-container">
        <div className="search-bar-area">
          <div className="about-foto-fab">
            <h1>Foto-Fab</h1>
            <p>The internet's source of freely-usable images.</p>
            <p>Powered by creator everywhere</p>
          </div>
          <SearchForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
          />
        </div>
      </div>
    ) : (
      <div
        className="search-bar-container"
        style={{ backgroundImage: `url("${photo.urls.full}")` }}
      >
        <div className="black-layer"></div>
        <div className="search-bar-area">
          <div className="about-foto-fab">
            <h1>Foto-Fab</h1>
            <p>The internet's source of freely-usable images.</p>
            <p>Powered by creator everywhere</p>
          </div>
          <SearchForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
          />
        </div>

        <div className="picture-info">
          <div className="photographer">
            <p onClick={this.handleProfile}>
              <strong>Photo</strong> by {""}
              <strong>{photo.user.name}</strong>
            </p>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    photo: state.randomPhotoState.photo,
  };
};

export default connect(mapStateToProps, { fetchRandomPhotos })(
  withRouter(SearchBar)
);

This is the App.js

import React from "react";
import Navbar from "./components/Navbar";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Home from "./pages/Home";
import LoginPage from "./pages/LoginPage";
import ProfilePage from "./pages/ProfilePage";
import SearchPage from "./pages/SearchPage";
import PublicUserProfilePage from "./pages/publicUserProfilePage";
import MobileNavigation from "./components/MobileNavigation";
import AboutPage from "./pages/AboutPage";


function App() {
  return (
    <BrowserRouter>
      <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/profile" component={ProfilePage} />
          <Route exact path="/search/:searchQuery" component={SearchPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route
            exact
            path="/public/:username"
            component={PublicUserProfilePage}
          />
          <Redirect to="/" />
        </Switch>
      <MobileNavigation />
    </BrowserRouter>
  );
}

export default App;

search form component

import React, { Component } from "react";

export class SearchForm extends Component {
  render() {
    const { onSubmit, onChange } = this.props;
    return (
      <form className="search-form" onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Search free high-resolution photos"
          onChange={onChange}
        />
        <button type="submit">
          <i className="fa fa-search"></i>
        </button>
      </form>
    );
  }
}

export default SearchForm;

Answer 1

import React, { Component } from "react";
import "./styles/searchBar.scss";
import "font-awesome/css/font-awesome.min.css";
import { withRouter } from "react-router-dom";
import SearchForm from "./SearchForm";
import { connect } from "react-redux";
import { fetchRandomPhotos } from "../redux/actions/randomPhotoAction";
class SearchBar extends Component {
  state = {
    searchQuery: "",
  };

  componentDidMount() {
    this.props.fetchRandomPhotos();
  }

  handleChange = (event) => {
    this.setState({ searchQuery: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    if (this.state.searchQuery) {
      this.props.history.push(`/search/${this.state.searchQuery}`);
    }
  };

  handleProfile = () => {
    this.props.history.push(`/public/${this.props.photo.user.username}`);
  };

  render() {
    const { photo } = this.props;
    return !photo ? (
      <div className="search-bar-container">
        <div className="search-bar-area">
          <div className="about-foto-fab">
            <h1>Foto-Fab</h1>
            <p>The internet's source of freely-usable images.</p>
            <p>Powered by creator everywhere</p>
          </div>
          <SearchForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
          />
        </div>
      </div>
    ) : (
      <div
        className="search-bar-container"
        style={{ backgroundImage: `url("${photo.urls.full}")` }}
      >
        <div className="black-layer"></div>
        <div className="search-bar-area">
          <div className="about-foto-fab">
            <h1>Foto-Fab</h1>
            <p>The internet's source of freely-usable images.</p>
            <p>Powered by creator everywhere</p>
          </div>
          <SearchForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
          />
        </div>

        <div className="picture-info">
          <div className="photographer">
            <p onClick={this.handleProfile}>
              <strong>Photo</strong> by {""}
              <strong>{photo.user.name}</strong>
            </p>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    photo: state.randomPhotoState.photo,
  };
};

export default connect(mapStateToProps, { fetchRandomPhotos })(
  withRouter(SearchBar)
);