Reactjs Return存在，但它仍然表示“返回”；没有从render返回任何内容。”；

首先，我试着搜索和阅读类似的问题。我甚至发现了与我的问题非常相似的东西。但没有任何帮助

所以，我有这个投影的路由组件，但它给了我这个错误

import React from 'react';
import { Route, useHistory } from 'react-router-dom';
import Cookies from 'js-cookie';

const ProtectedRoute = ({ component: Component, ...rest }) => {
    const token = Cookies.get('token');
    const history = useHistory();

    const renderComp = (props) => {
        if (token) {
            return <Component {...props} />;
        } else {
            return history.push('/');
        }
    };

    return <Route {...rest} render={renderComp} />;
};

export default ProtectedRoute;

从“React”导入React；
从“react router dom”导入{Route，useHistory}；
从“js cookie”导入cookie；
const ProtectedRoute=（{component:component，…rest}）=>{
const token=Cookies.get（'token'）；
const history=useHistory（）；
const renderComp=（道具）=>{
如果（令牌）{
返回；
}否则{
返回历史。推送（'/'）；
}
};
返回；
};
导出默认的ProtectedRoute；

这是我通过受保护的路由渲染的组件

import React from 'react';

export default function Greet() {
    return (
        <div>
            <h1>Hello</h1>
        </div>
    );
}

从“React”导入React；
导出默认函数Greet（）{
返回(
你好
);
}

---

请提供帮助，并解释其发生的原因。据我所知，我从方法中返回了一些东西。然后呢？

更新您的

renderComp

函数如下：

const renderComp = (props) => {
    if (token) {
        return <Component {...props} />;
    } else {
        history.push('/');
        return null;
    }
};

const renderComp=（道具）=>{
如果（令牌）{
返回；
}否则{
历史推送（“/”）；
返回null；
}
};

---

React组件应该返回一些jsx或null。所以基本上，不是返回

history.push（'/'）

您需要返回

null

。因为

history.push（'/'）

返回未定义，因此如果返回

history.push（'/'）返回的是未定义的。
它可能来自
返回历史。推送（'/'）。这可能不会返回任何内容，因此React检测到“nothing”正在被返回。在else子句中，可能更好的方法是返回react路由器
重定向组件：不幸的是，它不起作用。我试过
。所以，我在错误的地方做了。谢谢解决了。不幸的是，即使在应用了您建议的更改之后也是一样的。那个么问题就在其他地方了。你能在代码沙盒或其他东西上创建一个可复制的示例吗？是的，请稍候。完成后我会把它贴在这里。酷，现在有点忙。今天晚些时候再看你也有同样的问题，但也在另一个地方。在登录组件中，您将返回
历史记录。推送（'/'）
。使用
或返回null；