router.js

// <Routes>
//   <Route path="/" element={<RequireAuth><Dashboard /></RequireAuth>}>
//   <Route path="about" element={<AboutPage />} />
// </Routes>

import { Auth } from 'aws-amplify'
import { Navigate } from 'react-router-dom'

const RequireAuth = ({ children }) => {
  const [loading, setLoading] = React.useState(true)
  const [user, setUser] = React.useState()
  
  React.useEffect(() => {
    Auth
      .currentAuthenticatedUser()
      .then(u => {
        setUser(u)
        setLoading(false)
      })
      .catch((err) => {
        setLoading(false)
        console.error(err)
      })
  }, [])
  
  if (loading) {
    return <h1>Loading</h1>
  }
  
  if (user) {
    return children
  }
  
  return <Navigate to="/login" replace />
}