Routing

Routing is handled client-side using react-router-dom. All routes are defined in /client/src/routes and automatically generated in /client/src/app/app.js

Defining a New Route

Routes are defined in their respective file inside /client/src/routes. To add a new route, import the View component and add a new object to the route array.

  {
    path: '/account/password',
    view: Password,
    layout: 'app',
    permission: 'user',
    title: 'Your Password'
  },

Public routes without a permission (such as the auth pages) are generated using the standard <Route> component included with React Router.

<Route path={ route.path } element={
  <View display={ route.view } layout={ route.layout } title={ route.title  } />
}/>

Props

name	description
title	page title	string
layout	name of view layout component	string
display	view component with child	function

Gravity also contains a <PrivateRoute> component that enables you to protect routes with a user permission. <PrivateRoute> accepts an optional permission prop.

<Route path={ route.path } element={
  <PrivateRoute permission={ route.permission }>
    <View display={ route.view } layout={ route.layout } title={ route.title }/>
  </PrivateRoute>
}/>

Code Splitting

If you would like to introduce route splitting to create separate bundles in your application, you can do so by simply lazy loading the view in the route file.

You will need to ensure that your relevant view component is exported as the default export for this to work.

const Routes = [{
 path: '/dashboard',
 view: lazy(() => import('views/dashboard')),
 layout: 'app',
 permission: 'user',
 title: 'Your Dashboard'
}]