Блог

Это все сообщение об ошибке, которое я получаю, когда нажимаю на div (тот, у которого className =»hotel-row»)

index.js: 1 Предупреждение: React.createElement: недопустимый тип — ожидалась строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт.

Проверьте свой код на 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
  

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

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