Using the <RapidRouter /> component
If you are using any of the layouts that are offered by RapidAdminReact® then you are already using the advantages of the <RapidRoutes> and can easily jump to the next section on how you can define private and public routes and start developing your application. Just in case you have created a custom layout then you need to use the <RapidRouter> while bootstrapping your application.
import React from 'react';
import { RapidMain , RapidRouter } from '../@rapidAdmin/components';
import routes from "../config/routes/routes";
function App ()
{
return (
<RapidMain>
<RapidRouter routes = { routes } isAuth = { isAuth } />
</RapidMain>
);
}
export default App;
Defining base routes for your application
routes.js is a single file where you can define all your routes. See the directory tree below to know where routes.js is located.
./config
├── routes
│ ├── paths.js
│ └── routes.js
Sample route definition
routes is a single object that is exported from the routes.js. See the below code sample to see how you can define various route paths in this object.
Lazy Loading: RapidAdminReact® supports lazy loading by default. If you do not want to use lazy loading you can define your own routes using the react-router, just the way you would do it in any other react appplication.
import React, {lazy} from 'react';
import routePaths from "./paths";
import { RapidPreLoader } from "../../@rapidAdmin/components";
export const routes = [
{
path : routePaths.signIn ,
exact : true ,
component : lazy ( () => import('../../pages/SignIn') ) ,
redirect : false ,
private : false ,
fallback : ( <RapidPreLoader /> ) ,
routes : [
{
path : routePaths.changePassword ,
exact : true ,
component : lazy ( () => import('../../pages/ChangePassword') ) ,
redirect : false ,
private : false ,
fallback : ( <RapidPreLoader /> ) ,
}
]
} ,
{
path : routePaths.calendar ,
component : lazy ( () => import('../../pages/Calendar') ) ,
exact : false ,
private : true ,
fallback : ( <RapidPreLoader /> ) ,
} ,
{
path : routePaths.dashboard ,
component : lazy ( () => import('../../pages/Dashboard') ) ,
exact : true ,
private : true ,
fallback : ( <RapidPreLoader /> ) ,
} ,
];
Using a pre-loader while loading components
If you refer the above code you, defining a pre-loader to enable smooth loading between components is as easy as assigning one to the fallback: property. We use the default <RapidPreLoader /> component which can be customised using varioud props. You can use the pre-loader that you want. You can look at the <RapidPreLoader /> API to see various options available for cutomisation.
API’s:
