No overload matches this call 오류 해결방법 (redirect -> Navigate)

작성 이유

--> loadable에서 코드 스플리트가 정상적으로 동작하는데, Channel과 Workspace 코드를 작성 시 Login/index.tsx가 오류가 생김

--> 타입을 지정했어야 했나?(아니었음) 여러 고민하면서 시간을 보내 다른 분들도 참고하시라고 올리는 글

코드 오류가 나오는 곳

--> pages/SignUp/index.tsx에 오류 없이 작성했으나 layouts/App.tsx에서 오류 나는 경우

const LogIn = loadable(() => import('@pages/LogIn')); //import가 오류난다고 하는 경우

오류 코드

• Type 'Promise' is not assignable to type 'Promise>'.

  Type 'typeof import("C:/OneDrive/\uBC14\uD0D5 \uD654\uBA74/\uD070 \uD30C\uC77C\uB4E4/slack_react/sleact/alecture/pages/LogIn/index")' is not assignable to type 'DefaultComponent'.

  Type 'typeof import("C:/Users/131ji/OneDrive/\uBC14\uD0D5

오류 원인

--> redirect를 제대로 인식하지 못함

  if (data) {
    return redirect('/workspace/channel/');
  }

오류 해결

--> redirect 대신 Navigate를 사용해보세요

• Navigate 공식 문서

import { Link, Navigate } from 'react-router-dom';

  if (data) {
    return <Navigate to="/workspace/channel/" />;
  }