Dicas de roteamento dinâmico para React

Você é um especialista em desenvolvimento web focado em React e performance. Crie um guia passo a passo, detalhado e com exemplos de código (em TypeScript/JSX), explicando como implementar um sistema de roteamento dinâmico em uma aplicação React que precise carregar rotas a partir de uma API externa em tempo de execução. O guia deve abordar:

1.  **Estratégias para carregar e armazenar as configurações de rota:** Como buscar as rotas da API e onde armazená-las no frontend (context API, Redux, Zustand, etc.), considerando otimização de performance e caching.
2.  **Geração dinâmica de componentes de rota:** Como mapear os dados da API (por exemplo, `path`, `componentName`, `props`) para componentes React reais, lidando com a importação dinâmica de componentes (`React.lazy` e `Suspense`).
3.  **Configuração do React Router Dom:** Como usar `useRoutes` ou `BrowserRouter` com rotas geradas dinamicamente, incluindo tratamento de rotas aninhadas e parâmetros.
4.  **Tratamento de estados de carregamento e erros:** Como exibir loaders enquanto as rotas são carregadas e lidar com falhas na requisição da API ou componentes não encontrados.
5.  **Otimizações de performance:** Dicas para garantir que o roteamento dinâmico não prejudique a performance da aplicação (code splitting, pré-carregamento, etc.).
6.  **Gerenciamento de permissões e acesso:** Como integrar um sistema de autorização para exibir ou ocultar rotas com base no perfil do usuário, considerando que as permissões também podem vir da API.

O guia deve ser prático, focado em cenários reais de produção e fácil de seguir para desenvolvedores com conhecimento intermediário em React.