이번 글에서는 <{모듈참조명} /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. 에러 해결 방법에 대하여 알아보겠습니다.
<{모듈참조명} /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
[에러가 발생한 코드]
import React from 'react';
import {Route} from 'react-router-dom';
function App() {
return (
<div className="App">
// 에러가 발생한 코드
<Route exact path="/" component="reactRouter"/>
</div>
)
}
export default App;
[에러 원인]
React에서 HTML 요소에는 소문자를 사용해야 하는데, CamelCase 형식으로 대문자가 포함되어있어서 발생한 에러입니다. 이 외에도, 컴포넌트명을 작성할 때는 PascalCase로 대소문자를 사용해야 합니다.
[해결 방법]
React 컴포넌트에는 Pascal 대소문자를 사용 하고 HTML 요소에는 소문자 를 사용하시면 됩니다.
// html요소에 모두 소문자를 입력
<Route exact path="/" component="reactrouter"/>
