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

Posted 2023-02-21

【中文标题】渲染没有返回任何内容；试图重定向到主页

【英文标题】：Nothing was returned from render; trying to redirect to homepage

【发布时间】：2020-06-29 16:09:05

【问题描述】：

我正在使用 react 进行一个学校项目，但我在重定向到某个页面时遇到了困难。我正在使用 react-router-dom 进行导航。在我的代码中，如果测试数组不包含任何内容，我会尝试通过history.push("/") 重定向到主页。如果我将 else 渲染条件更改为随机的 p 标签，它将渲染该文本，但我只是希望它在 else 语句中重定向。

edit：刷新页面时发生错误，正在推送url。所以如果我再次刷新，我在首页。

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"
            
            
            
          />
          <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('/')
    );
  
;

【参考方案1】：

如果您想更改 函数 中的 url，请使用 history.push。当它基于你渲染的东西时，你应该使用Redirect。

在这种情况下，您应该使用Redirect，如下所示：

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

如果您基于点击按钮更改页面，那么history.push 将是合适的。

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

【讨论】：

谢谢！我现在明白这个概念了。