Layout Configuration

All routes loaded through the default layout component src/layouts/index.js, which handles layout rendering and this rendering depends on the current route / user status.

Template has three layouts:

  • Main

  • Auth (for Login, Lockscreen, etc.. pages)

  • Public (empty layout)

If you need a new layout, just add another one to the src/layouts folder, import it into src/layouts/index.js and add logic when it needs to be rendered.

See BootstrappedLayout() and getLayout() functions in src/layouts/index.js:

import PublicLayout from './Public'
import LoginLayout from './Login'
import MainLayout from './Main'
// map layoyts
const Layouts = {
public: PublicLayout,
login: LoginLayout,
main: MainLayout,
// getting the layout depends on route
const getLayout = () => {
if (pathname === '/') {
return 'public'
if (/^\/auth(?=\/|$)/i.test(pathname)) {
return 'auth'
return 'main'
// set container
const Container = Layouts[getLayout()]
// render correct layout
const BootstrappedLayout = () => {
// show loader when user in check authorization process, not authorized yet and not on login pages
if (isUserLoading && !isUserAuthorized && !isAuthLayout) {
return null
// redirect to login page if current is not login page and user not authorized
if (!isAuthLayout && !isUserAuthorized) {
return <Redirect to="/auth/login" />
// in other case render previously set layout
return <Container>{children}</Container>
return (
<Helmet titleTemplate="{templateName} | %s" title="React Admin Template" />