React.createElement: тип недействителен - ожидается строка (я не вижу проблем с импортом / экспортом)

Question

Я создаю простой веб-сайт React, и моя консоль продолжает показывать эту ошибку, когда я пытаюсь открыть домашнюю страницу в браузере.

"Предупреждение: React.createElement: тип недопустим - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но есть: объект. Скорее всего, вы забыли экспортировать компонентиз файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и имена. "

После просмотра других вопросов от людей, у которых была такая же проблема, кажется, что в импорте отсутствовали фигурные скобки, ноЯ считаю, что я делаю это правильно.На самом деле, я не могу найти ничего плохого в моем импорте / экспорте.Любое направление будет с благодарностью!Кроме того, я использую mapDispatch, потому что здесь я также использую Redux.

Мой компонент:

import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import { getCampuses, getStudents } from '../reducers';

import Nav from './Nav';
import Home from './Home';
import Students from './Students';
import Campuses from './Campuses';
import EditCampus from './EditCampus';
import EditStudent from './EditStudent';
import CreateStudent from './CreateStudent';
import CreateCampus from './CreateCampus';
import Student from './Student';
import Campus from './Campus';
import Footer from './Footer';

class Root extends React.Component{

  componentDidMount() {
    this.props.fetch();
  }

  render() {
    return (
      <Router>
        <div>
          <Nav />
          <div className='container-fluid'>
            <Switch>
              <Route path='/students/:id' component={ Student } />
              <Route path='/campuses/:id' component={ Campus } />
              <Route path='/editstudent/:id' component={ EditStudent } />
              <Route path='/editcampus/:id' component={ EditCampus } />
              <Route path='/createstudent' component={ CreateStudent } />
              <Route path='/createcampus' component= { CreateCampus } />
              <Route path='/students' component={ Students } />
              <Route path='/campuses' component={ Campuses } />
              <Route exact path='/' component={ Home } />
            </Switch>
          </div>
          <Footer />
        </div>
      </Router>
    );
  }
}

const mapState = null;

const mapDispatch = dispatch => ({
  fetch() {
    dispatch(getCampuses());
    dispatch(getStudents());
  }
});

export default connect(mapState, mapDispatch)(Root);

Визуализация DOM:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import store from './store';
import Root from './components/Root';

ReactDOM.render(
  <Provider store={store}>
    <Root />
  </Provider>,
  document.getElementById('main')
)

Answer 1

Поэтому, когда я переключился на BrowserRouter, я получил другую ошибку, которая гласила: «Uncaught TypeError: (0, _store.getCampuses) не является функцией».Я, наконец, заставил его работать, когда я импортировал функцию getCampuses более конкретно с помощью «../reducers/campuses» (куда я экспортировал функцию getCampuses).Я сделал то же самое с getStudents ('../reducers/students').Спасибо, что направили меня в правильном направлении!

Answer 2

Хорошо, попробуйте, что вы используете HashRouter, который используется для статического сайта, но в вашем случае это не так.Так что попробуйте,

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';