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

我真的不知道我做错了什么

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

似乎对我不起作用

下面是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;

这是我现在的代码

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>
        )
    }
}
export default Header;

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;

您以错误的方式导入详图构件

将App.js更改为：

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

---

除此之外，在默认导出中，组件实际上是命名为list而不是list。文件名也混淆了。但我看到的主要错误是要么他应该导入细节…``而不是导入{Detail}…`或者导出{Detail}而不是导出默认细节哦，是的，我完全同意你的观点，这是主要问题。我只是指出了一个额外的问题，这个问题实际上可能仅限于文章，并且在代码中是正确的。事实上，您的错误日志中有答案。JS语法区分大小写。您必须将组件更改为从React导入的组件。谢谢！这对我很有用非常感谢你！至于这个问题，它可能会帮助经历同样问题的人了解我是如何做到的？还是应该删除最后一部分？

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>
        )
    }
}

import React, { component}  from 'react';

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

        <div>

            List!
        </div>
    )
}
}

export default List;

import React, { component}  from 'react';

export class Detail extends Component {

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

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