routes.md

The Dapp routes configuration and utilities

Routes configuration

The Dapp routes configuration is in the file ./src/components/Routes.tsx

// Pages
import { Home } from '../pages/Home';
import { Keys } from '../pages/Keys';

export const pagesRoutesConfig: Routes = [
  {
    path: '/',
    element: <Home />,
    title: 'Home', // <-- Page title in the header
    label: 'Home' // <-- Menu label
  },
  {
    path: '/keys',
    element: <Keys />,
    title: 'Keys management',
    label: 'Keys'
  }
];

AppRoutes component

Special component that builds routes element. This component is used on the App.tsx as a part of main layout.

<AppRoutes />

GlobalMenu component

Create a menu with links to all registered pages. This component is used in the header.

<GlobalMenu />

usePageTitle hook

Allows to get a page title for the currently loaded route. In the case of route that not registered this hook returns '404' (string). This hook is used in the header.

Protected routes

Here is an example of protected route config:

{
  path: '/keys',
  element: <Keys />,
  title: 'Keys management',
  label: 'Keys',
  protected: true // <--
}

When you try to access the protected route from the not logged-in state then after successful log-in you will be redirected to an initially requested route.