-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
<Route> 태그 사용시 화면 렌더링이 안됩니다.
21.12.19 01:38 작성 조회수 1.05k
1
강사님 설명과는 다르게 디렉토리 구조를
pages 내 Home.js, About.js이렇게 만든게 아니라
pages/home 내 index.js 방식으로 작성했는데요
첫 번째 스크린샷처럼 <Route>태그를 주석처리하면 컴포넌트가 보이는데
두번째 스크린샷처럼 <Route>태그를 살리면 아무 컴포넌트도 렌더링 되지 않습니다.
혼자서 몇시간 잡고 있다가 도저히 해결이 안되서 질문드립니다 ㅠ.ㅠ
답변을 작성해보세요.
4
이재형
질문자2021.12.19
질문 올리고 혹시나 해서 더 찾아봤는데,
제가 사용하는 react-router-dom version은 6.2.1이라v.5.x.x 와 <Route>를 사용하는 방식이 달라졌습니다.
저는 아래방식으로 문제를 해결했습니다.
import React from "react";
import { Routes, Route } from "react-router-dom";
import Container from "components/common/Container";
import Home from "pages/home";
import BusinessInquiry from "pages/business";
import UserRoutes from "pages/users";
function Root() {
return (
<Container>
최상위 컴포넌트
<Routes>
<Route path="/" element={<Home />} />
<Route path="/business" element={<BusinessInquiry />} />
<Route path="/users/*" element={<UserRoutes />} />
</Routes>
</Container>
);
}
유저 라우팅
import React from "react";
import { Routes, Route, Outlet } from "react-router-dom";
import Profile from "pages/users/profile";
import Login from "pages/users/login";
import Signup from "pages/users/signup";
function UserRoutes({ match }) {
return (
<>
<Routes>
<Route path="/profile" element={<Profile />} />
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
</Routes>
</>
);
}
export default UserRoutes;
저와 같은 문제를 겪으신 분들을 위해 참고 출처 남깁니다.
https://velog.io/@soryeongk/ReactRouterDomV6
이진석
지식공유자2021.12.22
안녕하세요.
잘 해결하셨고, 정리도 해주셔서 감사드립니다.
저도 내용을 살펴보고, 강의에도 보강할 수 있도록 하겠습니다.
다시 한 번 더 감사드립니다. :-)
답변 1