[#PrivateRoute, #React-routerV6 #Nested Children type,#유효한 SX Element, # <>...</>] (React-Typescript) React-Router V6 PrivateRouter 구현 중 겪은 에러와 해결방법

어떤 기능을 만드려는 중 발생한 에러인가요?

RouterV6로 Private Router 기능을 만드는 중 발생했습니다.

RouterV6로 라우터 기능을 구현하고 싶다면 "여기" 링크를 참고하시면 됩니다.

---

어떤 특성의 에러인가요?

Private컴포넌트는 private하게 만들 라우터를 감싸는 wrapper 컴포넌트 입니다. Private컴포넌트에서 nested children의 타입을 제대로 정의하지 않아 발생한 에러 입니다

에러는 어디에서 발생했나요?

라우터 컴포넌트에서 발생했습니다

Private 컴포넌트를 라우터 컴포넌트에 임포트 한 후, 기존 라우터를 감싸는 중 발생했습니다.

어떤 에러 메세지인가요?

'PrivateRoute'은(는) JSX 구성 요소로 사용할 수 없습니다.
해당 반환 형식 'Element | { children: ReactNode; }'은(는) 유효한 JSX 요소가 아닙니다.
'{ children: ReactNode; }' 형식에 'ReactElement<any, any>' 형식의 type, props, key 속성이 없습니다.

기존에 어떤 코드를 작성해서 에러가 발생했나요?

PrivateRoute.tsx

function PrivateRoute({ children }: { children: React.ReactNode }) {
  let location = useLocation();
  const { user } = useContext(UserContext);
  return user ? (
    { children }
  ) : (
    <Navigate to="/login" state={{ from: location }} />
  );
}

Router.tsx

Router.tsx에서 PrivateRoute에서 에러가 발생했습니다

<Route
  path="/register"
  element={
    <PrivateRoute>
      <Register />
    </PrivateRoute>
          }
/>

---

어떻게 코드를 변경해서 에러가 사라졌나요?

function PrivateRoute({ children }: { children: React.ReactNode }) {
  let location = useLocation();
  const { user } = useContext(UserContext);
  return user ? (
     <>{children}</>
  ) : (
   <Navigate to="/login" state={{ from: location }} />
      );
}

다음은 핵심적인 코드 부분입니다.

<>{children}</>

위의 코드처럼 변경한 이유는 무엇인가요?

관련 에러를 검색 중 stackoverflow의 "여기" 링크에서 힌트를 얻었습니다.

에러 메세지 중, "JSX 구성 요소로 사용할 수 없다", "해당 반환형식이 유효하지 않다"는 부분에 주목했습니다.

현재 받아오는 children을 반환하는 데, children의 형식이 유효하지 않다는 판단을 했습니다

children에 값이 들어오지만, 이 children이 유효한 엘리먼트로 사용되지 않기 때문이라 추측했습니다.

위 링크에서 다음과 같은 답변을 제공했습니다(저의 상황과 같지는 않지만,,,)

You need to return a JSX Element, not an array. Wrapping the whole component is a solution, but you need to do it outside of the map/filter function.

제가 작성한 children이 제대로 된 JSX ELEMENT가 아닌것으로 react가 인식하기 때문에
REACT FRAGMENT로서 빈 코드를 children에 감싸줬습니다

children이 JSX ELEMENT로서 인식되도록 <>..</>로 감싸줬습니다.

<>{children}</>

---

참고한 링크

: https://tunapanini.github.io/[React]%20JSX%20element%20type%20'Component'%20does%20not%20have%20any%20construct%20or%20call%20signatures.%20[2604]/

: https://www.codingdeft.com/posts/react-router-tutorial/