<Route> 태그 사용시 화면 렌더링이 안됩니다.

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

react-router-dom을 활용한 라우팅 처리

작성

1.3K

강사님 설명과는 다르게 디렉토리 구조를

pages 내 Home.js, About.js이렇게 만든게 아니라

pages/home 내 index.js 방식으로 작성했는데요

첫 번째 스크린샷처럼 <Route>태그를 주석처리하면 컴포넌트가 보이는데

두번째 스크린샷처럼 <Route>태그를 살리면 아무 컴포넌트도 렌더링 되지 않습니다.

혼자서 몇시간 잡고 있다가 도저히 해결이 안되서 질문드립니다 ㅠ.ㅠ

python react django docker

답변 1

이재형

질문자

질문 올리고 혹시나 해서 더 찾아봤는데,
제가 사용하는 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

이진석

지식공유자

안녕하세요.

잘 해결하셨고, 정리도 해주셔서 감사드립니다.

저도 내용을 살펴보고, 강의에도 보강할 수 있도록 하겠습니다.

다시 한 번 더 감사드립니다. :-)

인프런 커뮤니티 질문&답변

<Route> 태그 사용시 화면 렌더링이 안됩니다.