REACT Check the render method of `Route`. helpme T.T

Question

error image

This Image is Error Image

I am making react spa but i cannot figure this error! T.T

help me!

I think this error is begun in App.js But I don't know what should I do...

This is index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './containers/App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

serviceWorker.unregister();

This is App.js

import React, { Component } from 'react';
import { Switch, Link, Route } from 'react-router-dom';
import * as classNames from 'classnames/bind';
import styles from './App.scss';

import Main from './Main/Main'

const cx = classNames.bind(styles);

class App extends Component {
  render() {
    return (
      <div className={cx("App")}>
        <nav>
            <div><Link to="/">JUMP</Link></div>
        </nav>
       <main>
           <div className={cx("main")}>
               <Switch>
                   <Route path="/" exact component={Main}/>
               </Switch>
           </div>
       </main>
      </div>
    );
  }
}

export default App;

This is folder structure

├── src
│   ├── components
│   │   └── Headers
│   ├── containers
│   │   ├── 0.Login
│   │   │   ├──Login.js
│   │   │   └──Login.sass
│   │   ├── App.scss
│   │   ├── App.js
│   ├── index.scss
│   ├── index.js
│   ├── logo.scv
└── └── serviceWorker.js

Answer 1

As the error mentions you probably mixed up default export with named export. Check the import line for Main, depending on the way you exported it, you might have to change the way you imported it.