먼저, 리액트 라우터를 설치해야 합니다. 다음 명령어를 사용하여 설치할 수 있습니다:

npm install react-router-dom

리액트 라우터를 설치한 후, 로딩 상태를 표시하기 위해 Suspense 컴포넌트를 사용할 수 있습니다. Suspense 컴포넌트는 리액트의 lazy로딩 기능과 함께 사용됩니다.

먼저, 로딩 상태를 표시할 로딩 컴포넌트를 작성합니다. 예를 들어, Loading 컴포넌트를 만들어 사용할 수 있습니다:

import React from 'react';

const Loading = () => {
  return <div>Loading...</div>;
};

export default Loading;

그리고 사용자에게 보여줄 컴포넌트를 lazy로딩합니다. 예를 들어, Home 컴포넌트를 lazy로딩하여 사용할 수 있습니다:

import React, { lazy, Suspense } from 'react';
import Loading from './Loading';

const Home = lazy(() => import('./Home'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<Loading />}>
        <Home />
      </Suspense>
    </div>
  );
};

export default App;

위의 코드에서 <Suspense> 컴포넌트는 fallback 속성을 통해 로딩 상태를 표시할 컴포넌트를 전달받습니다. Loading 컴포넌트는 로딩 중인 동안 사용자에게 표시됩니다. <Home> 컴포넌트는 lazy로딩되어 보여주고 싶은 컴포넌트로 대체됩니다.