反应：您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认和命名导入答案

【问题标题】：REACT: You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports反应：您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认和命名导入
【发布时间】：2020-12-08 04:40:53
【问题描述】：

这是我在单击 div 时收到的全部错误消息（带有 className="hotel-row" 的那个）

index.js:1 警告：React.createElement：类型无效——预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记导出您的来自定义它的文件中的组件，或者您可能混淆了默认和命名导入。

在 HotelList.js:27 检查您的代码。

这个组件连接到redux

const mapStateToProps = (state) => state;

function mapDispatchToProps(dispatch) {
  return {
    loadHotels: async () => {
      dispatch(loadHotels());
    },
  };
}

function HotelList(props) {
  useEffect(() => {
    props.loadHotels();
  }, []);

  if (props.hotels.length != undefined) {
    const data = props.hotels;
    const listItems = data.map((d) => (
      <div className="hotel-row" onClick={() => <Redirect to={"/hotel/"+d.name} />}>
        <Hotel name={d.name} category={d.category} image={d.image} description={d.description} />
      </div>
    ));

    return <div className="hotel-list">{listItems}</div>;
  }
  return (
    <div>
      <p>Loading...</p>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(HotelList);

这就是我的路由器的样子

import * as React from "react";
import { Route, Switch, withRouter, Redirect } from "react-router-dom";
import HotelList from "../Components/HotelList";
import HotelPage from "../Components/HotelPage"
const Router = () => {
    const renderFor404Routes = () => <Redirect to="/" />;
    return (
      <div>
        <Switch>
          <Route exactly component={HotelList} exact path="/" />
          <Route exact path="/hotel/:name" component={HotelPage}  />
          <Route path="/" exactly component={renderFor404Routes} />
        </Switch>
      </div>
    );
  };
  
  export default withRouter(Router);

这是它应该重定向的地方

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
const HotelPage = () => {

  let { name } = useParams();


  useEffect(() => {
       
  }, [])

  return (
    <div>
      {name}
    </div>
  );
};

export default HotelPage

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这样解决了

<div className="hotel-row" onClick={() => props.history.push("/hotel/"+d.name)}>
        <Hotel name={d.name} category={d.category} image={d.image} description={d.description} />
      </div>

【讨论】：