反应错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义

Question

我正在尝试创建一个简单的页面来与某些路由器做出反应，但出现以下错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义. 应用程序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;

索引.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();

Answer 1

我的组件 NavigationBar 默认不导出，但我的其他页面是

导航栏

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>
)

我的页面结构非常简单

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>
    )
}

Answer 2

你可能正在使用一个还没有StrictMode的 React 版本。 它是在 React 版本16.3 中引入的。 React 抱怨是因为React.StrictMode返回的是undefined而不是实际的组件。 要确认这一点，请检查package.json文件中的 React 版本。