Como fazer um layout diferente para as rotas públicas e outro para as rotas privadas com o react-router-dom?

[wilsongomes-swe]

Galera,

tenho uma ideia já de como fazer, mas gostaria de opiniões e outros pontos de vista, como vocês fazem no ReactJS para separar o layout das telas públicas (login, signup, landingpage) e o layout das rotas privadas/protegidas (que terá as barras características de um painel de admin)? Como vocês fazem?

Abraços!

[fdaciuk]

Oi @wilsonneto-dev! Tem várias formas de fazer isso :)

Uma delas é como eu fiz aqui:
https://github.com/da2k/curso-reactjs-ninja/blob/master/examples/m04/04-reactzzaria/99/sistema-pedidos/src/app.js

No exemplo acima, todas as minhas rotas são privadas, menos a de login, que é pública.

Se você tiver várias rotas públicas e várias outras privadas, pode criar um componente PrivateRoute que verifica se o usuário tem permissão para acessar os dados que serão renderizados nessa rota, e permitir o acesso (exibir a rota com os dados), ou simplesmente redirecionar para uma rota pública, se não for permitido o acesso.

Tem um outro exemplo disso na doc do React Router:
https://reacttraining.com/react-router/web/example/auth-workflow

=)

[eliseumds]

Dois apps separados. Se estiverem no mesmo app, o manifest file do bundle vai incluir links para todos os chunks gerados, incluindo os "privados", o que não é a coisa mais segura. Fora que compilation time aumenta consideravelmente e você não tem a liberdade de escolher arquiteturas/dependências/linguagens diferentes. Nós usamos Yarn Workspaces + Lerna aqui na empresa pra lidar com isso.

PS: talvez seu app seja pequeno e você não precise fazer o que eu sugeri. Take it with a pinch of salt.