使用React Router的无限循环

如何解决使用React Router的无限循环

我正在尝试找出解决无限循环问题的方法。

流量：我有一个状态钩子setUserData，该钩子要传递给HomePage。我从HomePage调用API来检索数据，然后在App组件中进行设置。

现在，在设置数据并单击“后退”按钮时，由于已经设置了userData，因此它进入了无限循环。

该如何解决？

兴趣代码：

                 {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;

解决方法

基本URL指向主页。在HomePage上完成搜索后，数据将传递到ResultsPage。 （当前正在发生）。问题是，一旦填充了userData，然后单击返回便会再次重定向到ResultPage。当用户单击家庭浏览器上的“后退”按钮时，即使我的数据已经加载，我也必须能够返回首页。

如果您想实现它，更好的方法是在您的首页文件中处理重定向

假设 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>
  );
}