Routing

UBold React is having routing setup based on React-Router.

You can easily add, change or remove any route by simply making changes described below:

1. Open src/routes/index.tsx file, declare your component. E.g.

   const Dashboard2 = React.lazy(() => import('./views/dashboards/Dashboard2'));.

2. And make sure to add the entry for same with path and other properties like name, component, route, and roles in constants routes declared there. E.g.

   { path: '/dashboard2', name: 'Dashboard2', component: Dashboard2, route: PrivateRoute, roles: ['Admin'] },

   Each of these properties are explained below:

   • path - Url relative path
   • name - Name of your route
   • component - Actual component name which would get rendered when user visits the path
   • route - An actual route component which would get used. This helps to restrict the non authenticated and unauthorized users to access this path. There are two choices here: PrivateRoute and Route from react-router-dom package.

     If you specify PrivateRoute, the application would check if the user is already authenticated or not and also validate if the user is having required role assigned to it, in order to access the specified path. In order to specify which roles are allowed, you can specify them using roles property.

     If you specify Route, the application would not restrict user. Any user would be able to access the specified path.

   • roles - The roles which are allowed to access this specified path

Optionally, you might want to add the menu entry in respective layout menu component.