元素类型无效:React.js

我有个错误: 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.

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';
import App from './App';
import { authConfig } from './auth/authconfig';
import './index.css';
import * as serviceWorker from './serviceWorker';

const history = createBrowserHistory();

const store = configureStore(history, window.initialReduxState);

const rootElement = document.getElementById('root');

console.log('init');
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  rootElement
);

serviceWorker.register();

import React from 'react';
import { Route } from 'react-router';
import Layout from './components/Layout';
import Home from './components/Home';

export default () => (
  <Layout>
    <Route exact path="/" component={Home} />
  </Layout>
);

改变 <App /> <p>test</p> 我想问题出在App.js上,但我不确定哪里出了问题。

另外,当我在.NET Core React Redux模板的客户端应用程序中使用这些代码时,它工作得很好,这让我更加困惑。 我需要什么来解决这个问题?如果这些信息不够,我如何才能找到问题?

编辑

主页.js

import React from 'react';

const Home = props => (
  <div>
    <h1>Hello, world!</h1>
  </div>
);

export default Home;

import React from 'react';
import { Container, Col, Row } from 'reactstrap';
import NavMenu from './NavMenu';

export default props => (
  <Container>
    <Row>
      <Col sm="12" lg={{ size: 10, offset: 1 }}>
        <NavMenu />
      </Col>
    </Row>
    <Row>
      <Col sm="12" lg={{ size: 10, offset: 1 }}>
        {props.children}
      </Col>
    </Row>
  </Container>
);

导航菜单.js

import React from 'react';
import { Link } from 'react-router-dom';
import { Nav, Navbar, NavItem } from 'reactstrap';
import styled from 'styled-components';

export default props => (
  <StyledNavbar inverse fixedTop fluid collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <Link to={'/'}>HogeHoge</Link>
      </Navbar.Brand>
      <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
      <Nav>
        <NavItem href="/counter">Counter</NavItem>
        <NavItem href="/fetchdata">Fetch data</NavItem>
      </Nav>
    </Navbar.Collapse>
  </StyledNavbar>
);

//Styled Components
const StyledNavbar = styled(Navbar)`
  .navbar-nav .active a,
  .navbar-nav .active a:hover,
  .navbar-nav .active a:focus {
    background-image: none;
    background-color: #4189c7;
    color: white;
  }
`;