reactjs – How to re execute componentDidMount again when i click the component again?

enter image description here

This is my top navbar of my project and
enter image description here

when i click on blogs button list of all blogs will rendered and in this component i have a search option now when i have search text let’s say “vue” then i will get the required result

handleSubmit = values => {
    const { size } = this.state;
    this.setState({ searchString: values.searchString, isSearch: true });
    SearchSchema.searchString = this.state.searchString;
    this.props.history.push(`/blogs?q=${values.searchString}`);
    this.props.actions.loadBlogs({ page: 0, size, searchString: values.searchString });
  };

and this is componentDidMount of Blog Component

componentDidMount = () => {
    const { size } = this.state;
    const params = new URLSearchParams(this.props.location.search);
    const q = params.get('q');
    if (q) {
      this.setState({ searchString: q, isSearch: true });
      this.props.actions.loadBlogs({ page: 0, searchString: q, size });
    } else {
      this.setState({ searchString: '', isSearch: false });
      this.props.actions.loadBlogs({ page: 0, size });
    }
  };

After getting the result when i again clicked on Blogs from Top Navbar (in screenshot) url is getting changed but not getting all the blogs

<Link className="nav-link" to="/blogs">
            Blogs
          </Link>

enter image description here

screenshot with search result and url will be http://localhost:8075/blogs?q=vue
same screenshot is also applicable when i clicked blogs button again url is getting changed but blogs is not updated http://localhost:8075/blogs