反應錯誤：元素類型無效：應為字符串（對於內置組件）或類/函數（對於復合組件）但得到：未定義

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 版本。