[英]Element type is invalid: expected a string (for built-in components) … Check the render method of `App`
LINK TO PHOTO OF FILE TREE 链接到文件树的照片
PHOTO OF AUTH0 APP AFTER CODE FIXES 代码固定后AUTH0 APP的照片
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined。 You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入。
Check the render method of App
. 检查
App
的渲染方法。
index.js
import ReactDOM from 'react-dom';
import { makeMainRoutes } from './routes';
const routes = makeMainRoutes();
ReactDOM.render(
routes,
document.getElementById('root')
);
routes.js
import React from 'react';
import { Route, Router } from 'react-router-dom';
import App from './App';
import Home from './Home/Home';
import Callback from './Callback/Callback';
import Auth from './Auth/Auth';
import history from './history';
const auth = new Auth();
const handleAuthentication = (nextState, replace) => {
if (/access_token|id_token|error/.test(nextState.location.hash)) {
auth.handleAuthentication();
}
}
export const makeMainRoutes = () => {
return (
<Router history={history} component={App}>
<div>
<Route path="/" render={(props) => <App auth={auth} {...props} />} />
<Route path="/home" render={(props) => <Home auth={auth} {...props} />} />
<Route path="/callback" render={(props) => {
handleAuthentication(props);
return <Callback {...props} />
}}/>
</div>
</Router>
);
}
App.js
import React, { Component } from 'react';
import { Navbar, Button } from 'react-bootstrap';
import './App.css';
class App extends Component {
goTo(route) {
this.props.history.replace(`/${route}`)
}
login() {
this.props.auth.login();
}
logout() {
this.props.auth.logout();
}
componentDidMount() {
const { renewSession } = this.props.auth;
if (localStorage.getItem('isLoggedIn') === 'true') {
renewSession();
}
}
render() {
const { isAuthenticated } = this.props.auth;
return (
<div>
{/* <script type="text/javascript" src="node_modules/auth0-js/build/auth0.js"></script> */}
{/* <script src="https://cdn.auth0.com/js/auth0/9.10/auth0.min.js"></script> */}
<Navbar fluid>
<Navbar.Header>
<Navbar.Brand>
<a href="#">Auth0 - React</a>
</Navbar.Brand>
<Button
bsStyle="primary"
className="btn-margin"
onClick={this.goTo.bind(this, 'home')}
>
Home
</Button>
{
!isAuthenticated() && (
<Button
id="qsLoginBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.login.bind(this)}
>
Log In
</Button>
)
}
{
isAuthenticated() && (
<Button
id="qsLogoutBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.logout.bind(this)}
>
Log Out
</Button>
)
}
</Navbar.Header>
</Navbar>
</div>
);
}
}
export default App;
undefined && whatever
resolves to undefined
. undefined && whatever
解析为undefined
。 Check the value returned by this.props.auth.isAuthenticated()
. 检查
this.props.auth.isAuthenticated()
返回的值。 It should be boolean. 它应该是布尔值。 You can use
!!
你可以用
!!
to fix the issue: 解决问题:
{
!!isAuthenticated() && (
<Button
id="qsLogoutBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.logout.bind(this)}
>
Log Out
</Button>
)
}
But since you have to alternatives for this conditional it is better just to use this code: 但是,由于您必须使用此条件的替代方法,因此最好只使用此代码:
{
isAuthenticated() ? (
<Button
id="qsLogoutBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.logout.bind(this)}
>
Log Out
</Button>
) : (
<Button
id="qsLoginBtn"
bsStyle="primary"
className="btn-margin"
onClick={this.login.bind(this)}
>
Log In
</Button>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.