Reputation: 81
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;
Upvotes: 0
Views: 2875
Reputation: 1297
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>
);
}
Upvotes: 1