我的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);
最佳答案
<Route path={`${match.url}/servers`}
component={isAuthenticated
? asyncComponent(() => import('./Servers'))
: <Redirect to="/home" />} />
这可能无效,您的
<Redirect to="/home" />
将立即在render
中求值,其结果将提供给component
,而不是实际的Redirect组件。您可以尝试的一件事是将其更改为
() => <Redirect to="/home" />
这样,您基本上是为
component
提供一个“内联SFC”,仅当Route
虚假时才由isAuthenticated
实际渲染它时才对其进行评估。关于javascript - react 未处理的拒绝(不变违规),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58054013/