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

我试图在react with some router中创建一个简单的页面，我得到以下错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。 APP.JS

import React，{Component}来自'React'；
从“react Router dom”导入{Route，BrowserRouter作为路由器，交换机，链路}
从“/Contact”导入联系人
从“/Tournoi”导入Tournoi
从“/Home”导入主页
从“/components/NavigationBar”导入{NavigationBar}
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

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

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render(
,
document.getElementById（'root'））
);
//如果你想让你的应用程序离线工作并更快地加载，你可以更改
//取消注册（）以在下面注册（）。注意，这有一些陷阱。
serviceWorker.unregister（）；

默认情况下，我的组件导航栏不导出，而其他页面则不导出

导航栏

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

从“React”导入React
从'react bootstrap'导入{Nav，Navbar}；
从“样式化组件”导入样式化；
const Styles=styled.div`
navbar先生{
背景色：#222；
}
.导航栏品牌.导航栏导航.导航链接{
颜色：#bbb；
&盘旋{
颜色：白色；
}
}
`;
导出常量导航栏=（）=>(
家
接触
图诺
)

我的页面结构非常简单

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

从“React”导入React；
导出默认函数主页（）{
返回(
请您在accueil页面上签名
在托尔诺，我们不需要对托尔诺进行评级
)
}

可能其中一个组件：Home、Contact或Tournoi未正确导出，因此未定义。可能

NavigationBar

具有默认值，而不是命名的导出，或者

Home

中的一个组件具有默认值，反之亦然，

联系

或

Tournoi

是的，检查您是否已导出组件，并将其作为默认导出。否则请调整您的导入App.js您认为我的问题来自导航栏吗？我查看了其中的导航是导出的，就像这个导出常量导航栏一样。我将把代码放在“export const NavigationBar=（）=>”下面（太长了，我将写另一条注释）`

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