reactjs - 返回存在但它仍然说， "Nothing was returned from render."

Question

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

所以，我有这个预计的路线组件，但它给了我这个错误。

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;

这是我通过 protected 路由呈现的组件，

import React from 'react';

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

请帮忙解释一下为什么会这样。据我了解，我正在从方法中返回一些东西。然后呢？

Answer 1

将您的 renderComp 函数更新为如下所示:

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

React 组件应该返回一些 jsx 或 null。所以基本上，您需要返回 null 而不是返回 history.push('/');。因为 history.push('/'); 返回 undefined，因此如果您返回 history.push('/');，您将返回 undefined。