AWS Amplify를 사용하여 웹 애플리케이션을 구축하려고 합니다. 인증을 구성했지만 특정 페이지를 인증된 사용자만 사용할 수 있도록 하고 싶습니다. 예를 들어 홈 페이지는 누구나 볼 수 있지만 "/대시보드"는 로그인한 사용자만 볼 수 있습니다. 저는 현재 백엔드와 React 프런트엔드에 AWS Amplify를 사용하고 있으며, 페이지 간 라우팅에는 반응 라우터 v6을 사용하고 있습니다.

현재 내 라우팅 코드는 매우 간단하며(React를 처음 사용함) App.js에 있습니다.

먼저 withAuthenticator를 사용하여 인증하려는 페이지를 래핑하려고 시도했지만 이로 인해 로그인 상자가 표시되는 루프가 발생했습니다.

사용자가 인증되었는지 확인하고 다른 것을 반환하는 기능도 추가해 보았지만 인증된 사용자와 인증되지 않은 사용자에게만 빈 화면이 표시됩니다. async 때문인 것 같은데, React에 익숙하지 않아서 그 이유와 해결 방법을 이해할 수 없습니다.

저도 비동기적으로 라우팅할 수 있는 방법이 있는지 알아보려고 했지만 어떻게 구현해야 할지 잘 모르겠습니다.

편집자:

@Jlove의 솔루션은 이미 예상대로 작동합니다. 업데이트된 App.js라우팅 코드는 다음과 같습니다.

import React from 'react';
import {
  BrowserRouter,
  Route,
  Routes,
} from 'react-router-dom';

import Login from './pages/Login';
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import ErrorPage from './pages/ErrorPage';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;