작성
·
682
·
수정됨
2
Switch 문이 버전 6에서 사라졌다고 하네요. Route에서 props로 element 보내는 방법을 사용해서 코드를 수정해보았습니다. 참고하시면 좋을 거 같아요.
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import NavBar from "./components/views/NavBar/NavBar";
import Footer from "./components/views/Footer/Footer";
import LandingPage from "./components/views/LandingPage/LandingPage";
import LoginPage from "./components/views/LoginPage/LoginPage";
import RegisterPage from "./components/views/RegisterPage/RegisterPage";
function App() {
return (
<>
<NavBar />
<Router>
<Routes>
<Route path="/" element={<LandingPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
</Routes>
</Router>
<Footer />
</>
);
}
export default App;
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
ywk0205님, React Router v6에서 Switch 컴포넌트가 사라지고 Routes 컴포넌트로 대체되었기 때문에 문제가 발생한 것 같습니다. 말씀하신 대로 Route 컴포넌트 내에서 element prop을 사용하여 해당 경로로 접근했을 때 보여줄 컴포넌트를 지정하는 방법이 올바른 해결책입니다. 제공해주신 코드 예시가 다른 분들에게 도움이 될 것 같네요. 다른 질문이 있으시다면 언제든지 문의해주세요.