尝试导入错误：“详细信息”未从“./components/pages/List”导出

Question

我真的不明白我在这里做错了什么。

我希望能够在 App.js 上显示我的标题和列表以及我的详细信息。 但是：

:import { Header }  from  './components/pages/Header';
import { List }  from  './components/pages/Detail';
import { Detail }  from  './components/pages/List';

似乎对我不起作用。

这是来自 App.js 的完整代码：

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

import { Header }  from  './components/pages/Header';
import { List }  from  './components/pages/Detail';
import { Detail }  from  './components/pages/List';
import './App.css';


function App() {
  return (

    <Router>
    <div className="App">
<Header/>
<Switch>
<Route path="/" exact component={widthRouter(List)} />
<Route path="/Detail/:id" component={widthRouter(Detail)} />
</Switch>


    </div>
    </Router>
  );
}

export default App;

这里来自 Header.js：

import React, { Component } from 'react';

import logo from '../logo.svg';

export class Header extends Component {
    render() {
        return(
            <div>
            <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
             React-Demo
            </p>
           
          </header>
          </div>
        )
    }
}
export default Header;

来自 List.js：

import React, { component}  from 'react';

export class list extends Component {
render() {
    return (

        <div>

            List!
        </div>
    )
}
}
export default List

这里来自 Detail.js：

import React, { component}  from 'react';

export class Detail extends Component {

    render() {
        return (
    
            <div>
    
                Detail!
            </div>
        )
    }
    }
    
export default Detail

有谁知道我做错了什么？

非常感谢您的帮助！ :)

---

所以我已经完成了你在 cmets 中所说的事情。 （我认为）

但它仍然不适合我。这是我现在从终端得到的错误：

*"

*Failed to compile.
src\components\pages\Detail.js
  Line 3:29:  'Component' is not defined  no-undef     
src\components\pages\List.js
  Line 3:27:  'Component' is not defined  no-undef     
Search for the keywords to learn more about each error.* 
"*

所以这是我现在的代码。

App.js

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

import Header  from  './components/pages/Header';
import Detail  from  './components/pages/Detail';
import List from  './components/pages/List';
import './App.css';

function App() {
  return (

    <Router>
    <div className="App">
<Header/>
<Switch>
<Route path="/" exact component={withRouter(List)} />
<Route path="/Detail/:id" component={withRouter(Detail)} />
</Switch>

    </div>
    </Router>
  );
}

export default App;

Header.js：

import React, { Component } from 'react';

import logo from './logo.svg';

export class Header extends Component {
    render() {
        return(
            <div>
            <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
             React-Demo
            </p>
           
          </header>
          </div>
        )
    }
}

导出默认标题； List.js：

import React, { component}  from 'react';

export class List extends Component {
render() {
    return (

        <div>

            List!
        </div>
    )
}
}

export default List;

Detail.js ：

import React, { component}  from 'react';

export class Detail extends Component {

    render() {
        return (
    
            <div>
    
                Detail!
            </div>
        )
    }
    }
    
export default Detail;

Answer 1

您以错误的方式导入Detail 组件。

将 App.js 更改为：

import Detail  from  './components/pages/Detail';