[英]React Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I'm trying to create a simple page in react with some router, I get the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.我正在尝试创建一个简单的页面来与某些路由器做出反应,但出现以下错误:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义. APP.JS
应用程序JS
import React, {Component} from 'react';
import {Route, BrowserRouter as Router, Switch, Link } from "react-router-dom"
import Contact from "./Contact"
import Tournoi from "./Tournoi"
import Home from "./Home"
import {NavigationBar} from "./components/NavigationBar"
class App extends Component{
render(){
return (
<React.Framgent>
<NavigationBar/>
<Router>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/Contact" component={Contact}/>
<Route path="/Tournoi" component={Tournoi}/>
</Switch>
</Router>
</React.Framgent>
);
}
}
export default App;
Index.js索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
My component NavigationBar is not export by default howewer my other pages are我的组件 NavigationBar 默认不导出,但我的其他页面是
Navigation Bar导航栏
import React from 'react'
import {Nav,Navbar} from 'react-bootstrap';
import styled from "styled-components";
const Styles = styled.div `
.navbar {
background-color: #222;
}
.navbar-brand .navbar-nav .nav-link{
color:#bbb;
&hover{
color:white;
}
}
`;
export const NavigationBar = () => (
<Styles>
<Navbar expand="lg">
<Navbar.Brand href="/"></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="m1-auto">
<Nav.Item><Nav.Link href="/">Home</Nav.Link> </Nav.Item>
<Nav.Item><Nav.Link href="/Contact">Contact</Nav.Link> </Nav.Item>
<Nav.Item><Nav.Link href="/Tournoi">Tournoi</Nav.Link> </Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
</Styles>
)
My Pages structures is terribly simple我的页面结构非常简单
import React from 'react';
export default function Home (){
return(
<div className="Bannière1">
<h1>Bienvenue vous êtes sur la page d'accueil</h1>
<button> Créer un tournoi </button> <button>Voir notre générateur de Bracket</button>
</div>
)
}
You are probably using a version of React that did not yet have StrictMode
.你可能正在使用一个还没有
StrictMode
的 React 版本。 It was introduced in React version 16.3 .它是在 React 版本16.3 中引入的。 React is complaining because
React.StrictMode
is returning undefined
instead of the an actual component. React 抱怨是因为
React.StrictMode
返回的是undefined
而不是实际的组件。 To confirm this, check the version of React in your package.json
file.要确认这一点,请检查
package.json
文件中的 React 版本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.