渲染没有返回任何内容； 尝试重定向到主页

Question

I'm working on a school project with react, and I'm having difficulties redirecting to a page. I'm using react-router-dom to navigate. In my code, I try to redirect to the homepage by history.push("/") if the test array doesn't contain anything. If I change the else rendering condition to a random p tag, it will render that text, but I just want it to redirect in the else statement.

edit: the error happens when refreshing the page, the url is being pushed. So if i refresh again, I am at the homepage.

import React from "react";
import styles from "./Profile.module.css";
import { useParams } from "react-router-dom";
import { useStores } from "../../hooks/useStores";
import Trade from "../Trade/Trade";
import { useHistory } from "react-router-dom";

const Profile = () => {
  const history = useHistory();
  const stores = useStores();

  let { id } = useParams();
  const test = stores.dataStore.openTrades.filter(
    trade => trade.user.id.toString() === id
  );

  if (test.length > 0) {
    return (
      <>
        <div className={styles.profileHead}>
          <img
            src={process.env.PUBLIC_URL + "/assets/img/poke-logo.svg"}
            alt="profile icon"
            width="120"
            height="120"
          />
          <p
            className={styles.profileName}
          >{`Profile of ${test[0].user.name}`}</p>
        </div>
        <div className={styles.trades}>
          <h2 className={styles.profileTrades}>
            {`${test[0].user.name}'s trades`}{" "}
            <span className={styles.tradesLength}>({test.length})</span>
          </h2>
          <div className={styles.tradesColumn}>
            {test.map((trade, index) => (
              <Trade key={index} trade={trade} index={index}></Trade>
            ))}
          </div>
        </div>
      </>
    );
  } else {
    return(
    history.push('/')
    );
  }
};

Answer 1

When you want to change the url within a function , use history.push . When its based on something you render , you should use the Redirect .

In this case, you should be using Redirect like below:

} else {
  return(
    <Redirect to="/" />
  );
}

If you were changing the page based on say a button click, then history.push would be appropriate.

<button onClick={() => history.push('/')}>Go to Home</button>