Ошибки при включении простого компонента в приложение (реакция / редукция)

Question

У меня есть образец, основанный на https://github.com/coryhouse/react-slingshot/. Я удалил приложение FuelSavings и заменил его тем, которое работает нормально, но я написал компонент, и когда я включаю его в приложение, он предотвращает рендеринг чего-либо (я получаю белую страницу).

Я получаю 3 ошибки, когда я добавляю в <UserHeader /> добавить тег в App.js:

• "Предупреждение: React.createElement: тип не должен быть нулевым, неопределенным, логическим или числовым. Он должен быть строкой (для элементов DOM) или ReactClass (для составных компонентов). Проверьте метод визуализации App".
• Неопределенное нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Проверьте метод визуализации App,
• Uncaught TypeError: Невозможно прочитать свойство 'props' из неопределенного

Если я удалю UserHeader тег, остальная часть страницы загружается просто отлично.

SRC / компоненты /App.js

import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';
import { UserHeader } from './UserHeader';

const App = (props) => {
  return (
    <div>
      <IndexLink to="/">Home</IndexLink> | <Link to="/About">About</Link>
      <UserHeader />

      {props.children}
    </div>
  );
};

export default App;

SRC / компоненты /UserHeader.js

import React, { Component, PropTypes } from 'react';

const UserHeader = (props) => {
  return (
    <p>Welcome!</p>
    );
};

export default UserHeader;

Любые мысли приветствуются. Сам сервер не показывает никаких проблем, только предупреждение об отсутствии проверки реквизита. Проблема заключается в предотвращении любого кода в UserHeader от выполнения. Я просто недостаточно опытен, чтобы знать как!

Answer 1

Это:

import { UserHeader } from './UserHeader'

должно быть:

import UserHeader from './UserHeader'

так как UserHeader экспорт по умолчанию.