Недопустимый тип элемента: React.js

Question

У меня ошибка: 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., когда я использую следующий код:

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

App.js

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, он работает хорошо, что еще больше запутывает меня. Что мне нужно для решения этой проблемы и как я могу найти проблему, если эта информация недостаточно?

РЕДАКТИРОВАТЬ

Я не помню, чтобы я заменил response-bootstrap в основном шаблоне .net на responsestrap, поэтому проблема была в NavMenu.js как@devserkan указал.

Home.js

import React from 'react';

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

export default Home;

Layout.js

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

NavMenu.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;
  }
`;

Answer 1

Измените использование Navbar.Brand и т. Д. На NavbarBrand, поскольку нет экспорта из Navbar как Brand и т. Д. Есть отдельные экспорты как NavbarBrand из reactstrap, как можно видеть. здесь .

Обновление после комментариев

Насколько я знаю, ConnectedRouter идет с connected-react-router сейчас:)

Answer 2

Обычно это общая ошибка для неправильно импортированных модулей.Это может быть проблемой с вашими дочерними компонентами в Layout.js или Home.js.Убедитесь, что вы импортируете модули правильно.

import {MyComponent} from '../components/xyz.js'; // throws error if not default export

против

import MyComponent from '../components/xyz.js'; // works!

---

Я также видел похожую ошибку с библиотекой, которую я использовал.https://stackoverflow.com/a/52432243/6817437

Может быть полезно, если вы сможете воссоздать свою ошибку в codeandbox.io, чтобы сузить точную проблему.

---

Примечание: использование анонимных функций для создания функциональных компонентов Reactэто плохая практика.Неявное именование в порядке с функциями стрелок ( см. Твит Дана здесь ).Анонимные функции сложнее тестировать и отлаживать компоненты, когда у них нет отображаемого имени.