Question

此图片是错误图片

我正在制作React Spa，但我不知道这个错误！ T.T

救救我！

我认为此错误始于App.js 但是我不知道该怎么办...

这是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();

这是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;

这是文件夹结构

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

Answer 1

如错误所述，您可能将默认导出与命名导出混为一谈。检查Main的导入行，具体取决于导出方式，您可能不得不更改导入方式。

Answer 2

我看到您在App.js文件中导入了Main组件。但是我在结构中看不到主文件。请仔细检查“主要组件”中的导出。

反应检查`Route`的渲染方法。帮助我T

2 个答案: