Infinite loop with React router

Question

I am trying to figure out how to resolve an infinite loop issue.

FLOW: I have a state hook setUserData that I am passing to HomePage. From HomePage I am calling API to retrieve data and then set it in the App component.

Now when data is set and I click back button, then it into an infinite loop because userData is already set.

What can I do to fix it ?

CODE OF INTEREST:

                 {userData ?
                  <Redirect push
                    to={{
                      pathname: "/user",
                      search: `username=${userData.data.login}`
                    }}
                  />
                  :
                  <Homepage setUserData={setUserData} />}

---

import React, { useState } from "react";
import "./App.css";
import Homepage from "./components/Homepage";
import ResultsPage from "./components/ResultsPage";
import Footer from "./components/Footer"
import { HashRouter, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router-dom";

function App() {
  const [userData, setUserData] = useState(null);


  return (
    <div className="App">
      <HashRouter>
        <Switch>
          <Route exact path="/">
            {userData ?
              <Redirect push
                to={{
                  pathname: "/user",
                  search: `username=${userData.data.login}`
                }}
              />
              :
              <Homepage setUserData={setUserData} />}
          </Route>
          <Route path="/user">
            <ResultsPage userData={userData} />
          </Route>
        </Switch>
      </HashRouter>
      {/* <Footer /> */}
    </div>
  );
}

export default App;

Answer 1

Base URL points to HomePage. When search is done on HomePage, data is passed to ResultsPage. (This is happening currently). Issue is that once userData is populated then clicking back redirects to ResultPage again. I need to be able to come back to HomePage when user clicks back button on home browser (Even if data is already loaded).

if u want achieved it, the better way is handle redirect in your homepage file

assume that HomePage.jsx

import { useHistory} from "react-router-dom";

const HomePage = (props)=>{
  const { setUserData } = props
  ....
  const history = useHistory()
  const handleClick = ()=>{
    const data = HTTP.get('api')
    setUserData(data)
    history.push(`/user?username=${data}`)
  }
  ...
  return (
   ...
   <button onClick={handleClick} >BUTTON</button>
   ...
 
  )

}

App.jsx

function App() {
  const [userData, setUserData] = useState(null);
  return (
    <div className="App">
      <HashRouter>
        <Switch>
          <Route exact path="/">
            <Homepage setUserData={setUserData} />}
          </Route>
          <Route path="/user">
            <ResultsPage userData={userData} />
          </Route>
        </Switch>
      </HashRouter>
      {/* <Footer /> */}
    </div>
  );
}