PrivateRoute.tsx

import React from "react";

import { Route, Redirect } from "react-router-dom";
import { useAuthenticated } from "../store/auth/hooks";

function PrivateRoute({
  children,
  ...rest
}: {
  children: JSX.Element | JSX.Element[];
}) {
  const isAuthenticated = useAuthenticated();

  return (
    <Route
      {...rest}
      render={({ location }) =>
        isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location, error: "Please sign in first." },
            }}
          />
        )
      }
    />
  );
}

export default PrivateRoute;

routes.tsx

import { Route, Switch } from "react-router-dom";

import Home from "./pages/Home";
import Login from "./pages/Login";
import Account from "./pages/Account";

import PrivateRoute from "./components/PrivateRoute";

const BaseRouter = () => (
  <Switch>
    <Route component={Home} path="/" exact />
    <Route component={Login} path="/login" />
    <PrivateRoute>
      <Route component={Account} path="/account" />
    </PrivateRoute>
  </Switch>
);

export default BaseRouter;