在ReactJS中应该如何处理经过身份验证和未经过身份验证的组件？

import React from "react";
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route
    {...rest}
    render={(props) =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);

const AuthenticatedComponent = () => {
  // 已经经过身份验证的组件
  return <h1>Welcome to the authenticated component!</h1>;
};

const UnauthenticatedComponent = () => {
  // 未经过身份验证的组件
  return <h1>Welcome to the unauthenticated component!</h1>;
};

const App = () => {
  const isAuthenticated = true; // 这里假设用户已经登录，你可以根据实际情况进行修改

  return (
    <Router>
      <div>
        <Route
          exact
          path="/login"
          component={UnauthenticatedComponent}
        />
        <PrivateRoute
          path="/authenticated"
          component={AuthenticatedComponent}
          isAuthenticated={isAuthenticated}
        />
      </div>
    </Router>
  );
};

export default App;