Routing

Routes define the navigation structure and access control for different screens within CargoXplorer TMS. They are a crucial part of the AppModule configuration, determining how users interact with various components of the system.

Introduction

Routing in CargoXplorer TMS establishes the hierarchical structure of the application, linking URLs to specific components and managing access permissions. This system ensures efficient navigation and proper security measures throughout the application.

When to Use Routes

• When defining the overall structure of your CargoXplorer TMS application
• To create new screens or sections within the system
• When setting up access control for different parts of the application
• To establish relationships between different components and views

Routes Example

Transportation Management

routes:
  - name: "Shipments/List"
    path: "shipments"
    component: "Shipments/ListComponent"
    props:
      title:
        en-US: "Shipments"
    children: # Nested routes
      - name: "Shipments/Details"
        path: ":id" # Route path with a dynamic parameter
        component: "Shipments/DetailsComponent"

Key Attributes:

• name: Unique identifier for the route
• path: URL path for accessing the route
• component: Component to render for this route
• props: Properties to pass to the component
• children: Nested routes under this route
• permission: Required permission to access this route

Route Fields

Field	Description	Usage
name	Unique identifier for the route	Used for internal references and navigation
path	URL path for accessing the route	Defines the URL structure for the application
component	Component to render for this route	Specifies which UI component should be displayed
props	Properties to pass to the component	Allows for customization of the component based on the route
children	Nested routes under this route	Creates a hierarchical structure for complex views
permission	Required permission to access this route	Controls access to specific parts of the application

How to Create Routes

1. Open your AppModule configuration file
2. Locate the routes section
3. Add a new route entry with the required fields:

routes:
  - name: "ExampleRoute"
    path: "example"
    component: "Example/ExampleComponent"
    props:
      title:
        en-US: "Example Route"
    permission: "ExampleModule/Read"

4. For nested routes, add them under the children property of a parent route
5. Save your configuration file

Best Practices

1. Use descriptive and consistent naming conventions for route names
2. Keep URL paths (the path property) short and meaningful
3. Organize routes hierarchically to reflect the structure of your application
4. Always set appropriate permissions to ensure proper access control
5. Use props to pass necessary data to components, enhancing reusability