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

작성한 질문수 6

4

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