React 未处理的拒绝（不变违规）

Question

我的 React 模板中的身份验证存在一些问题。 当我登录时，它工作正常，但是当我注销时，我收到了类似的消息。

未处理的拒绝（不变违规）：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。

检查Route的渲染方法。

这是我的代码的样子。

const Dashboard = ({ match, isAuthenticated }) => (
    <Col span={24}>
        <Menu
            mode="horizontal"
        >
            <Menu.Item key="News">
                <Link to="./News"><i className="icon icon-alert gx-text-white" /> News</Link>
            </Menu.Item>
            <Menu.Item key="Servers">
                <Link to="./Servers"><i className="icon icon-widgets gx-text-white" />Servers</Link>
            </Menu.Item>
            <Menu.Item key="Billing">
                <Link to="./Billing"><i className="icon icon-pricing-table gx-text-white" />Billing</Link>
            </Menu.Item>
            <Menu.Item key="Support">
                <Link to="./Support"><i className="icon icon-chat-bubble gx-text-white" />Support</Link>
            </Menu.Item>
            <Menu.Item key="Logs">
                <Link to="./Logs"><i className="icon icon-plain-list-divider gx-text-white" />Activity Logs</Link>
            </Menu.Item>
        </Menu>
        <Switch>
            <Redirect exact from={`${match.url}/`} to={`${match.url}/News`} />

            <Route path={`${match.url}/servers`}
                component={isAuthenticated ? asyncComponent(() => import('./Servers')) :
                    <Redirect to="/home" />} />
        </Switch >
    </Col>
);

const mapStateToProps = state => {
    return {
        isAuthenticated: state.auth.token !== null
    };
};

export default connect(mapStateToProps, null)(Dashboard);

Answer 1

<Route path={`${match.url}/servers`}
  component={isAuthenticated
    ? asyncComponent(() => import('./Servers'))
    : <Redirect to="/home" />} />

这可能是无效的，您的<Redirect to="/home" />将立即在render中进行评估，其结果将提供给component ，而不是实际的 Redirect 组件。

您可以尝试的一件事是将其更改为() => <Redirect to="/home" />

这样，您基本上是在为组件提供“内联 SFC”，该component仅在isAuthenticated错误时由Route实际呈现时才进行评估。

Answer 2

谢谢。 这是有效的代码。

<Route path={`${match.url}/news`}
                component={isAuthenticated
                    ? asyncComponent(() => import('./News'))
                    : () => <Redirect to="/home" />} />