Routing and Menu

Routing is based on well-known React Router library. The React client has a single point (src/routing.ts) to define the screens that will be automatically placed in the main menu:

menuItems.push({
  pathPattern: '/pets', // pattern may be used to consume some parameters, e.g.: /pets/:petId?
  menuLink: '/pets',
  component: PetBrowser, // component to be rendered, should be imported in `routes.ts`
  caption: 'Pets' // Menu item caption
});

The src/App.tsx contains Switch component that renders a screen depending on the URL path:

  <Switch>
    <Route exact={true} path="/" component={HomePage}/>
  {collectRouteItems(menuItems).map(route => (  // get all routes from main and sub menus
  <Route key={route.pathPattern} path={route.pathPattern} component={route.component}/>
    )}
  </Switch>

You can manually add a Route to the Switch component or customize the structure used in routes.ts for example in order to create a hierarchical menu.

Sub Menus

To create a hierarchical menu you need to create a SubMenu instance in routes.ts and add it to the menuItems.

// This is RouteItem object that we want to see in User Settings sub menu
const userProfileRouteItem = {
  pathPattern: "/profile",
  menuLink: "/profile",
  component: UserProfile,
  caption: "UserProfile"
};

// SubMenu
const userSettingsSubMenu = {
  caption: 'UserSettings', // add router.UserSettings key to src/i18n/en.json for valid caption
  items: [userProfileRouteItem]};

// Add sub menu to menu config
menuItems.push(userSettingsSubMenu);

Sub menus can have unlimited nesting. One sub menu could be used as an item in another.