Private and Different Layouts with React Router

I created a different template for React with React Router 4. The idea is:

  • Code flexible able to manage many layouts.
  • Possibility to choose a different layout for any component or a layout for a group of components.
  • If a user is not logged in the URL’s that required a login, then show the public layout with a login form.
  • If the user is logged and their wants see the public page (like about-us), the layout must be the public layout with the possibility to see the private web page if click in a private URL.

View Preview#

View preview: Private and Different Layouts with React Router
You can see this working live here

Routes#

You can create the routes in this way. You can create many files that you want:

// src/routes/private.tsx
const routes: IRoute[] = [
{
component: Profile,
exact: true,
path: '/admin/profile',
},
];

Route Types#

There are three route types defined in the project.

// src/routes/routeTypes.tsx
export enum routeTypes {
private = 'private',
public = 'public',
session= 'session',
}

private: private pages like profile, edit-profile, etc. If the user isn’t logged then must to show the login page.
public: public pages like about-us, contact, etc.
session: session pages like login and sign-up. If the user is logged then must to redirect to the private dashboard.

Routes Template#

In this file you can define the routes, the template and the rights (public, private, session).

// src/routes/index.tsx
const routesTemplate: IRouteTemplate[] = [
{
routes: privateRoutes,
template: GlobalLayout,
type: routeTypes.private,
},
...
];

Router#

It define the route and call the Auth.

// src/start/Routes.tsx
routesTemplates.map((routesTemplate) => {
const { routes: appRoutes, template: Template , type} = routesTemplate;
return appRoutes.map( (appRoute) => {
return (
<Route
exact={appRoute.exact}
path={appRoute.path}
key={appRoute.path}
render={(route) =>
<Auth
appRoute={appRoute}
Template={Template}
route={route}
type={type}
/>
}
/>
);
});
})

Auth#

Verify the rights and redirection.

// src/start/Auth.tsx
if (isPrivate(type) && !global.logged) {
return <GlobalLayout Component={Error403} route={route} />;
}
if (isSession(type) && global.logged) {
return <Redirect to="/" />
}
const Layout = appRoute.template ? appRoute.template : Template;
return <Layout
Component={appRoute.component}
route={route}
/>;

You can download this code in my Github. I updated it, its working with the API code.