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;

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

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。所以基本上，你需要返回 history.push('/'); 而不是返回 null。因为 history.push('/'); 返回 undefined，因此如果您返回 history.push('/');，您将返回 undefined。

返回存在，但它仍然说，“渲染没有返回任何内容。”

1 个答案: