나는 함께 일하고 create-react-app
있었고 내가 얻는이 문제를 발견했습니다 Home does not contain an export named Home
.
내 App.js
파일을 설정하는 방법은 다음과 같습니다 .
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'
class App extends Component {
render() {
return (
<div className="App">
Hello
<Home />
</div>
)
}
}
export default App;
이제 내 layouts
폴더에 Home.js
파일이 있습니다. 다음과 같은 설정입니다.
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<p className="App-intro">
Hello Man
</p>
)
}
}
export default Home;
보시다시피 Home
구성 요소를 내보내고 있지만 콘솔에 오류가 발생합니다.
무슨 일이야?
답변
이 오류는 잘못 가져오고 있음을 나타냅니다. 지금 가지고있는 코드 :
import { Home } from './layouts/Home';
이름이 지정된 내보내기가 아닌 기본 내보내기로 내보내고 있기 때문에 올바르지 않습니다. 이 줄을 확인하십시오.
export default Home;
이름이 아닌 기본값으로 내보내는 중 입니다. 따라서 다음 Home
과 같이 가져옵니다 .
import Home from './layouts/Home';
중괄호가 없습니다. 에 추가 읽기 import
와 export
.
답변
사용하다
import Home from './layouts/Home'
보다는
import { Home } from './layouts/Home'
{}
집에서 제거
답변
이것은 기본 내보내기와 명명 된 내보내기 를 혼합 한 경우 입니다.
named
내보내기를 처리 할 때 가져 오려고하면 아래와 같이 중괄호를 사용해야합니다.
import { Home } from './layouts/Home'; // if the Home is a named export
귀하의 경우 홈이 기본으로 내보내졌습니다. 이것은 특정 코드 조각의 특정 이름을 지정하지 않을 때 모듈에서 가져 오는 것입니다. 가져오고 중괄호를 생략하면 가져 오는 모듈에서 기본 내보내기를 찾습니다. 따라서 가져 오기는
import Home from './layouts/Home'; // if the Home is a default export
몇 가지 참조 :
답변
방금이 오류 메시지가 표시되었습니다 (Nextjs 9로 업그레이드 한 후 일부 트랜스 파일 된 가져 오기에서이 오류가 발생하기 시작했습니다). 나는 다음과 같은 구문을 사용하여 수정했습니다.
import * as Home from './layouts/Home';
답변
우리는 또한 사용할 수 있습니다
import { Home } from './layouts/Home';
클래스 키워드 앞에 내보내기 키워드를 사용합니다.
export class Home extends React.Component{
render(){
........
}
}
기본
import Home from './layouts/Home';
기본 내보내기 클래스
export default class Home extends React.Component{
render(){
........
}
}
두 경우 모두 쓸 필요가 없습니다.
export default Home;
방과후.
답변
이 문제를 해결하기 위해 두 가지 방법을 사용할 수 있습니다. 첫 번째 방법은 코드 가져 오기 세그먼트를 다음과 같이 바꾸는 것입니다.
import Home from './layouts/Home'
또는 다음과 같이 이름이 지정된 기본없이 구성 요소를 내보내십시오.
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<p className="App-intro">
Hello Man
</p>
)
}
}
export {Home};
답변
이것이 해결책입니다.
- Home.js 파일로 이동하십시오.
- 파일 끝에 다음과 같이 파일을 내 보내야합니다.
export default Home;
