Неверный метод рендеринга ReactJs

Question

Я получаю это сообщение об ошибке (см. 1-е изображение ниже), когда запускаю свое приложение ReactJS (в браузере и в терминале).

Сообщение об ошибке в браузере:

Моя проблема в том, что я экспортировал свой файл App.js. Поэтому я не понимаю, откуда приходит сообщение об ошибке. Все остальные мои файлы в приложении также были правильно экспортированы.

Код из редактора кода:

Вот мой код в виде текста из файла App.js:

import React, { Component } from 'react';
//import 'bootstrap/dist/css/bootstrap.css';
import Navigation from './Components/Navigation';
import SideNavigation from './Components/SideNavigation';
import Backdrop from './Components/Backdrop';
//import DrawerToggleButton from './Components/DrawerToggleButton';
import About from './Components/About';
//import Portfolio from //'./Components/Portfolio';
import Contact from './Components/Contact';
import Footer from './Components/Footer';
import './App.css';


class App extends Component {
 render() {
   return(
    <div>
     <Navigation />
     <SideNavigation />
    <Backdrop />
    {/* <DrawerToggleButton /> */}
    <About />
    {/* <Portfolio /> */}
    <Contact />
   <Footer /> 
    </div>

   )
    }
  }

  export default App;

Answer 1

Существует ряд причин, по которым вы можете столкнуться с этой ошибкой. 1) Если ваш компонент приложения выглядит так export const App = () => ....all your code, попробуйте импортировать компонент приложения следующим образом import {App} from './App'

2) Попробуйте создать компонент приложения, используя класс, подобный export default class App extends React.Component

Надеюсь, это поможет ..