Question

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

未处理的拒绝（始终违反）：元素类型无效：   预期的字符串（用于内置组件）或类/函数（用于   复合组件），但得到了：对象。

检查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 to="/home" />

通过这种方式，您基本上是为component提供一个“内联SFC”，仅当Route虚假时才由isAuthenticated实际渲染时才进行评估。

Answer 2

谢谢！这是有效的代码。

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

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

2 个答案: