后退按钮不呈现信息 - 反应路由器 dom v5.2

Question

当我点击后退按钮（它在 react-router-dom v5.2 中使用 useHistory）时，我的预测/:zip 页面返回到正确的 zip，但没有显示正确的预测信息。

因此，如果我搜索预测/90210 和预测/12345，然后返回，我的浏览器网址将显示预测/90210，但显示预测/12345。

当我回击时，我没有看到任何道具或任何信息。我可以用 withRouter 包装 Forecasts，但它只显示 pathName，在我的 props 中没有状态信息。

后退按钮位于 Forecasts.js 中的“const Item”。

有人可以让我知道我可以尝试什么吗？谢谢。

App.js

function App() {

  const [zipCode, setZipCode] = React.useState("");

  const handleChange = (newzipCode) => {
    setZipCode(newzipCode);
    console.log(newzipCode)
  };

  return (
    <BrowserRouter>
      <div className="container mt-2" style={{ marginTop: 40 }}>
        <Switch>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
          <Route path="/home">
            <Home changeZip={handleChange} />
          </Route>
          <Route path={`/forecasts/:zip`}>
            <Forecasts zip={zipCode} />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

Home.js

const Home = (props) => {
  const [searchText, setSearchText] = useState(
    props.zip ? props.zip : "45678"
  );
  // const [newZip, setnewZip] = useState("");

  const handleInputChange = (event) => {
    const enteredText = event.target.value;
    setSearchText(enteredText);
  };

  const useStyles = makeStyles({
    parent: {
      // borderColor: "red",
      // borderStyle: "solid",
      height: "100%",
      width: "100%",
      justifyContent: "center",
      // display: 'inline-block',
      // textAlign: "center",
      // alignItems: "center",
    },
    child: {
      // borderColor: "blue",
      // borderStyle: "solid",
      justifyContent: "center",
      textAlign: "center",
      display: "inline-block",
      alignItems: "center",
    },
  });

  const classes = useStyles();

  const passZip = () => {
    // setnewZip(searchText);
    props.changeZip(searchText);
    console.log(props.changeZip);
  };

  return (
    <>
      <Grid className={classes.parent} container>
        <Grid className={classes.child} item xs={12} sm={4}>
          <span className="search-form">
            <div className="search-form__input">
              <TextField
                id="standard-basic"
                label="Zip"
                onChange={handleInputChange}
                value={searchText}
              />
            </div>
            <div className="search-form__submit">
              <Button
                component={Link}
                to={`/forecasts/${searchText}`}
                onClick={passZip}
              >
                Search
              </Button>
            </div>
          </span>
        </Grid>
      </Grid>
    </>
  );
};

export default Home;

Forecasts.js

const Forecasts = (props) => {

    let history = useHistory();

  const Item = () => {
    console.log(history)
    return (
      <>
        <button onClick={() => history.goBack()}>Back</button>
      </>
    );
  };

  const [forecasts, setForecasts] = useState([]);

  const searchLocationChange = (zip) => {
    console.log(zip);

    const weatherURL = `http://localhost:3001/${zip}`;

    console.log(weatherURL);

    fetch(weatherURL)
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        // const dailyData = data.list.filter(reading => reading.dt_txt.includes("18:00:00"))
        // setForecasts(data.list);
        setForecasts(data);
      });

    console.log(props);
  };

  const useStyles = makeStyles({
    parent: {
      // borderColor: "blue",
      // borderStyle: "solid",
      height: "100%",
      justifyContent: "center",
    },
    child: {
      borderColor: "green",
      borderStyle: "solid",
      // justifyContent: "center",
      textAlign: "center",
    },
    listitem: {
      display: "inline-block",
    },
  });

  const classes = useStyles();

  const [zipCode, setZipCode] = React.useState(props.zip ? props.zip : "45678");

  useEffect(() => {
    searchLocationChange(zipCode);
  }, [zipCode]);

  const handleChange = (newzipCode) => {
    setZipCode(newzipCode);
    console.log(newzipCode);
  };

  return (
    <Grid className={classes.parent} container>
      {Item()}
      <Home changeZip={handleChange} zip={zipCode}/>
      {forecasts &&
        forecasts.slice(0, 5).map((forecast, index) => {
          return (
            <DayCard
              key={index}
              temp={forecast.main.temp}
              desc={forecast.weather[0].description}
              dt={forecast.dt}
            />
          );
        })}
    </Grid>
  );
};