autenticação de rotas

Opa!

Posso te dar um spoiler que tem um curso em desenvolvimento que vai tratar disso. Enquanto ele não sai, posso te dar umas dicas relacionadas ao tema.

Você pode, por exemplo, criar um componente que encapsula essa lógica, alguma coisa assim:

import { ReactElement } from "react";
import { Navigate, useLocation } from "react-router-dom";

interface Props {
    children: ReactElement
}

export const RequerAutenticacao = ({ children }: Props) => {
    const token = sessionStorage.getItem("token");
    const location = useLocation();

    if (!token) {
        return <Navigate to="/" state={{ from: location }} />
    }

    return children;
};

E então as rotas do alurabooks ficariam assim:

const Rotas = () => {
    return (<Routes>
      <Route path='/' element={<PaginaBase />}>
        <Route path='/' element={<Home />} />
        <Route path='/minha-conta' element={<RequerAutenticacao><AreaLogada /></RequerAutenticacao>}>
            <Route path="pedidos" element={<Pedidos />} />
         </Route>
      </Route>
    </Routes>)
}

export default Rotas

Muito obrigado professor! já apliquei ao meu projeto