스택큐힙리스트

시도한 import 오류: 'Switch'는 'react-router-dom'에서 내보내지 않습니다. 본문

카테고리 없음

시도한 import 오류: 'Switch'는 'react-router-dom'에서 내보내지 않습니다.

스택큐힙리스트 2024. 1. 15. 14:37
반응형

이 오류가 발생하는 이유를 모르겠고 어떤 답을 찾을 수도 없습니다. react-router-dom 패키지를 제거하고 다시 설치했지만 여전히 'Switch' 모듈이 'react-router-dom'에서 내보내지지 않았다는 오류가 나타납니다. 이것이 제 코드입니다.


발생한 오류:



임포트 오류: 'Switch'가 'react-router-dom'에서 내보내지지 않았습니다.



코드

import React from 'react';
import './App.css';
import NavBar from './components/navbar.js';
import Footer from './components/footer.js';
import Home from './components/pages/homepage/home.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<div className=app-container>
<NavBar />
<Switch>
<Route path=/home component={Home} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;

리액트에서 임포트하기
import React from 'react';
import './App.css';
import NavBar from './components/navbar.js';
import Footer from './components/footer.js';
import Home from './components/pages/homepage/home.js';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
함수 App() {
리턴 (
<Router>
<div className=app-container>
<NavBar />
<Switch>
<Route path=/home component={Home} />
</Switch>
<Footer />
</div>
</Router>
);
}
내보내기 기본 App;

답변 1

react-router-dom v6에서 Switch는 routes Routes로 대체되었습니다. import 구문을 다음과 같이 업데이트해야 합니다.


import { Routes, Route } from 'react-router-dom';

또한, Route 선언 구문도 다음과 같이 업데이트해야 합니다.


<Route path='/' element={<Home/>} />

react-router-dom에서는 Route 선언 시에 exact를 사용할 필요가 없습니다.


더 많은 정보를 원하면 공식 문서를 참조하세요:
react-router-dom v6로 업그레이드하기

답변 2

주의: 이 문장은 영어로 제공되었으며 추후 번역됩니다. 번역이 완료되면 SEO를 고려한 한국어 에세이가 작성될 것입니다.
주어진 문장은 영어로 작성되었고, react-router-dom에서 'Switch'가 내보내지지 않았다는 오류 메시지입니다. 이 오류는 주로 React.js 애플리케이션에서 발생하는데, 해당 모듈에서는 'Switch'라는 컴포넌트를 내보내지 않았기 때문에 발생합니다.
React.js는 인기있는 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하기 위해 사용됩니다. react-router-dom은 React.js 애플리케이션의 라우팅을 다루는데 도움을 주는 라이브러리입니다. 라우팅은 사용자가 웹 사이트에서 다른 경로로 이동할 수 있게 해주는 기능을 의미합니다.
'Switch'는 react-router-dom 라이브러리의 일부로, 경로를 찾아갈 때 사용되는 라우팅 컴포넌트입니다. 일련의 라우팅 경로 중에서 첫 번째로 일치하는 경로에 따라 해당 컴포넌트를 렌더링합니다. 즉, 'Switch' 컴포넌트는 여러 라우트 중에서 하나를 선택하는 역할을 합니다.
이러한 컴포넌트를 사용하여 웹 사이트 내에서의 페이지 이동을 관리할 수 있습니다. 사용자가 특정 URL로 이동할 때마다 해당 URL에 해당하는 컴포넌트를 렌더링합니다. 이로써 사용자는 서로 다른 경로에 따라 다른 컨텐츠를 볼 수 있게 됩니다.
간단한 예를 들어 보겠습니다. 예를 들어, 웹 사이트에는 홈, 소개 및 연락처와 같은 세 가지 경로가 있다고 가정합니다. 사용자가 웹 사이트에 처음 방문하면, 홈 경로에 대한 컴포넌트가 렌더링됩니다. 그러나 사용자가 소개나 연락처로 이동하고 싶다면, 해당 경로에 대한 컴포넌트를 렌더링하여 관련 정보를 표시할 수 있습니다.
하지만 'Switch' 컴포넌트가 react-router-dom에서 내보내지지 않는다는 오류가 발생한다면, 애플리케이션에서 사용할 수 없다는 의미입니다. 이는 라우팅 시스템을 사용한 동적 페이지 전환을 구현하는 데 제한이 있을 수 있음을 의미합니다.
따라서 'Switch' 컴포넌트를 사용하기 위해서는 react-router-dom 라이브러리가 설치되어 있어야 하며, 해당 모듈에서 'Switch' 컴포넌트를 올바르게 가져와 사용할 수 있어야 합니다. 여기에는 'Switch' 컴포넌트를 다른 방식으로 import하는 문제나 버전 충돌 문제 등 여러 가지 이유가 있을 수 있습니다.
이와 관련하여 개발자는 'react-router-dom'의 문서를 확인하고, 적절한 방법으로 'Switch' 컴포넌트를 가져오도록 수정해야 합니다. 또한, 이러한 문제가 발생한 이유를 분석하고 해결책을 찾는 것이 중요합니다.
종합하자면, 'Switch'는 react-router-dom 라이브러리에서 내보내지는 라우팅 컴포넌트 중 하나입니다. 이 컴포넌트는 리액트 애플리케이션에서 URL 경로에 따라 페이지를 전환하기 위해 사용됩니다. 그러나 모듈에서 'Switch'를 가져오지 못한다는 오류가 발생할 때는, 'react-router-dom'의 설치 여부와 import 문제를 확인하고 해결해야 합니다.

반응형
Comments