ReactJS错误：元素类型无效：预期为字符串（对于内置组件）

Question

我正在尝试导出类并将其导入另一个文件，但是我一直收到此错误：... 检查NewsfeedDetail的渲染方法。

我要从以下文件中导出组件： NewsfeedDetail.js

import React from "react";

import {
  Card,
  Container,
  Dimmer,
  Header,
  Image,
  Loader,
  Message,
  Segment,
} from "semantic-ui-react";

import { articleDetailURL, } from "../constants";
import axios from "axios";

class NewsfeedDetail extends React.Component {
  state = {
    loading: false,
    error: null,
    data: [],
  };

  componentDidMount() {
    this.handleFetchItem();
  };

  handleFetchItem = () => {
    const {
      match: { params }
    } = this.props;

    this.setState({ loading: true });

    axios
      .get(articleDetailURL(params.articleID))
      .then(res => {
        this.setState({ data: res.data, loading: false });
      })
      .catch(err => {
        this.setState({ error: err, loading: false });
      });
  };

  render() {
    const { data, error, loading } = this.state;
    const item = data;

    return (
      <Container>
          {error && (
            <Message
              error
              header="There was some errors with your submission"
              content={JSON.stringify(error)}
            />
          )}
          {loading && (
            <Segment>
              <Dimmer active inverted>
                <Loader inverted>Loading</Loader>
              </Dimmer>
              <Image src="/images/wireframe/short-paragraph.png" />
            </Segment>
          )}

          <Header as='h4' textAlign='center'>
            <Header.Content>
                   {item.title}
            </Header.Content>
          </Header>

          <Card>
              <Card.Content>
                  <Card.Category >
                    {item.category}
                  </Card.Category>

                  <Card.Description>
                    {item.description}
                  </Card.Description>

                  <Card.Body>
                    {item.body}
                  </Card.Body>
                </Card.Content>
          </Card>
      </Container>
    );
  }
};

export default NewsfeedDetail;

我想将其导入以下文件： routes.js

import React from "react";
import { Route } from "react-router-dom";
import Hoc from "./hoc/hoc";

import Login from "./containers/Login";
import Signup from "./containers/Signup";
import HomepageLayout from "./containers/Home";
import ProductList from "./containers/ProductList";
import ProductDetail from "./containers/ProductDetail";
import OrderSummary from "./containers/OrderSummary";
import Checkout from "./containers/Checkout";
import Profile from "./containers/Profile";
import AboutLayout from "./containers/About";
import HotelLayout from "./containers/Hotel";
import NewsfeedList from "./containers/NewsfeedList";
import NewsfeedDetail from "./containers/NewsfeedDetail";

const BaseRouter = () => (
  <Hoc>
    <Route exact path="/products" component={ProductList} />
    <Route path="/products/:productID" component={ProductDetail} />
    <Route path="/login" component={Login} />
    <Route path="/signup" component={Signup} />
    <Route path="/order-summary" component={OrderSummary} />
    <Route path="/checkout" component={Checkout} />
    <Route path="/profile" component={Profile} />
    <Route exact path="/" component={HomepageLayout} />
    <Route exact path="/about" component={AboutLayout} />
    <Route exact path="/hotel" component={HotelLayout} />
    <Route exact path="/articles" component={NewsfeedList} />
    <Route path="/articles/:articleID" component={NewsfeedDetail} />
  </Hoc>
);

export default BaseRouter;

我尝试不使用默认值导出，并且在导入时使用{}，但它也不起作用。 请帮助我。