reactjs - 错误：元素类型无效，检查渲染方法

Question

我正在学习 React，并且在整理我的导航栏时遇到了一些麻烦。

我有这个错误：

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.

检查navigation.

在线查看表明，大多数情况下它是命名约定的问题。但对于我的生活，我看不出有什么不对。

这是我的文件：

导航

import './Navigation.css';
import { Col, Navbar, Nav, NavItem } from 'react-bootstrap';
import { NavLink } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';

const navigation = (props) => {
    return (
        <Col md={12} >
            <Navbar inverse collapseOnSelect>
                <Navbar.Header>
                    <Navbar.Brand>
                        <NavLink to={'/'} exact >Account-Owner</NavLink>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Nav>
                        <LinkContainer to={'/owner-list'} exact>
                            <NavItem eventKey={1}>
                                Owner Actions
                            </NavItem>
                        </LinkContainer>
                        <LinkContainer to={'/account-list'}>
                            <NavItem eventKey={2}>
                                Account Actions
                            </NavItem>
                        </LinkContainer>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </Col>
    )
}

export default navigation;

布局

import { Container as Container, Row } from 'react-bootstrap';
import Navigation from '../Navigation/Navigation';

const layout = (props) => {
    return (
        <Container>
            <Row>
                <Navigation/>
            </Row>
            <main>
                {props.children}
            </main>
        </Container>
    )
}

export default layout;

应用程序.js

import './App.css';
import Layout from '../components/Layout/Layout';
import Home from '../components/Home/Home';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Layout>
          <Switch>
            <Route path="/" exact component={Home} />
          </Switch>
        </Layout>
      </BrowserRouter>
    );
  }
}

export default App;

my folder structure: 

[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/o3K0K.png

标签： reactjsreact-routerjsx