React 导出默认抛出无效元素类型错误

Question

编辑：没关系，我发现了问题。我在导航栏组件中使用 Nav.link 而不是 Nav.Link :/。现在工作正常。

我正在尝试学习 React 和 bootstrap，并且正在构建一个带有导航栏、几个页面和一个登录页面的简单应用程序。我创建了一个名为 Navigation.js 的单独文件来定义 Navbar 组件并将其导出，以便我可以在 App.js 中使用它。但是，我收到以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: 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 Navigation.

Navigation.js 文件路径 src/components/Navigation.js 而 App.js 则是 src/App.js.

以下是相关的代码片段：

App.js

import 'bootstrap/dist/css/bootstrap.min.css';  
import './App.css';

import Navigation  from './components/Navigation';
import MainLandingPage from './components/pages/AppLandingPage';
import ContactUs from './components/pages/ContactUs';
import AboutUs from './components/pages/AboutUs';
import Login from './components/pages/Login';
import Home from './components/pages/Home';

import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Navigation/>
      <Switch>                
          <Route path='/about' component={AboutUs}/>                 
          <Route path='/contact' component={ContactUs}/>
          <Route path='/login' component={Login}/> 
          <Route path='/home' component={Home}/>  
          <Route path='/' component={MainLandingPage}/>            
      </Switch>
    </div>
  );
}

export default App;

Navigation.js:

import React from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';

class Navigation extends React.Component {
    constructor(props)
    {
        super(props);
    }
    render() {
        return (
            <Navbar collapseOnSelect fixed='top' expand='sm' bg='dark' variant='dark'>
                <Container>
                    <Navbar.Toggle aria-controls='responsive-navbar-nav'/>
                    <Navbar.Collapse id='responsive-navbar-nav'>
                        <Nav>
                            <Nav.link href='/'>Main</Nav.link>
                            <Nav.link href='/about'>About Us</Nav.link>
                            <Nav.link href='/contact'>Contact Us</Nav.link>
                            <Nav.link href='/login'>Log in</Nav.link>
                            <Nav.link href='/home'>Homepage</Nav.link>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
    );
    }
}

export default Navigation;

我确实查找了导出为默认导出和命名导出之间的区别，我认为在这种情况下我做对了。我还尝试将导航组件定义为如下函数：

function Navigation() {
    return (
        <Navbar collapseOnSelect fixed='top' expand='sm' bg='dark' variant='dark'>
            <Container>
                <Navbar.Toggle aria-controls='responsive-navbar-nav'/>
                <Navbar.Collapse id='responsive-navbar-nav'>
                    <Nav>
                        <Nav.link href='/'>Main</Nav.link>
                        <Nav.link href='/about'>About Us</Nav.link>
                        <Nav.link href='/contact'>Contact Us</Nav.link>
                        <Nav.link href='/login'>Log in</Nav.link>
                        <Nav.link href='/home'>Homepage</Nav.link>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
}

但我得到了相同的结果。我不确定我在这里遗漏了什么。

Answer 1

在Link

中做大写L

<Nav.Link href='/'>Main</Nav.Link>

React 导出默认抛出无效元素类型错误

React export default throwing invalid element type error

javascript

reactjs

react-bootstrap

react-router-dom