Cómo proteger las rutas con React Router

Protegiendo las rutas de una aplicación desarrollada con React Route

Image for post
Image for post

Definición del componente PrivateRoute

Image for post
Image for post

Definición del componente PublicRoute

Image for post
Image for post

Cómo usar PublicRoute y PrivateRoute

<HashRouter>
<Switch>
<PublicRoute
path={appRoutes.loginRoute()}
component={LoginScene}
/>
<PrivateRoute
path={appRoutes.logoutRoute()}
component={LogoutScene}
/>
<PrivateRoute
path={appRoutes.userCreateRoute()}
component={UserCreateScene}
/>
<PrivateRoute
path={appRoutes.userEditRoute()}
component={UserEditScene}
/>
<PrivateRoute
path={appRoutes.userDetailRoute()}
component={UserDetailScene}
/>
<PrivateRoute
exact
path={appRoutes.usersRoute()}
component={UsersScene}
/>
</Switch>
</HashRouter>

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store