Routes

Routes define navigation, available data, actions that can be taken on that data and, view to render the route. RemixFast uses concept of template to create routes and it associated views. From navigation point of view, RemixFast support following route patterns:

List - Detail

List detail is the most commonly used pattern for routes and all templates in RemixFast use this pattern as top level route, except for Profile, which only has detail as top level route.

__app\routes\item.tsx
__app\routes\item\$itemId.tsx

__app\routes\item.tsx
__app\routes\item\$itemId.tsx

This pattern is manifested in code using above two files, item.tsx to load top level route and $itemId.tsx to load detail.

List route is used to load list of items and display a table view. It also includes Outlet to render detail. Detail route is used to display item details and to carry out actions on an item.

┌────────┐      ┌────────┐
│ LIST   │      │ Detail │
│        │      │        │
│ Outlet ┼─────►│        │
└────────┘      └────────┘

┌────────┐      ┌────────┐
│ LIST   │      │ Detail │
│        │      │        │
│ Outlet ┼─────►│        │
└────────┘      └────────┘

By default, List is rendered using Table and Detail using Modal View. You can change List from Table to Card View or even a Kanban Board. Visual Editor allows you to redefine layout using drag-n-drop. Use Stack/Block layout components to combine data from multiple fields and create unique layouts!

Note: Profile route is itself a detail route does not have any descendent routes.

List - Detail, Related List pattern is used to show list of related items for an item in the list. With this pattern, List route is used to load list of items and display a table view. It also includes Outlet to render detail as well as related list. Detail route is used to display item details and to carry out actions on an item. Related route is used to display related item list and has it own Outlet to display related item details.

┌──────────┐      ┌──────────┐
│ LIST     │      │ Detail   │
│          │      │          │
│ Outlet   ┼─────►│          │
└──────────┘  │   └──────────┘
              │   ┌──────────┐      ┌──────────┐
              └──►│ Related  │      │ Related  │
                  │ List     │      │ Detail   │
                  │ Outlet   ┼─────►│          │
                  └──────────┘      └──────────┘

┌──────────┐      ┌──────────┐
│ LIST     │      │ Detail   │
│          │      │          │
│ Outlet   ┼─────►│          │
└──────────┘  │   └──────────┘
              │   ┌──────────┐      ┌──────────┐
              └──►│ Related  │      │ Related  │
                  │ List     │      │ Detail   │
                  │ Outlet   ┼─────►│          │
                  └──────────┘      └──────────┘

In RemixFast, you can create above pattern by dropping a list control, like table or card list on to an existing list view. This will results in following routes being created

__app\routes\item.tsx => Item List
__app\routes\item\$itemId.tsx => Item Detail
__app\routes\item\$itemId.relatedItem.tsx => Related Item List
__app\routes\item\$itemId.relatedItem\$relatedItemId.tsx => Related Item Detail

__app\routes\item.tsx => Item List
__app\routes\item\$itemId.tsx => Item Detail
__app\routes\item\$itemId.relatedItem.tsx => Related Item List
__app\routes\item\$itemId.relatedItem\$relatedItemId.tsx => Related Item Detail

List - Detail - Child Item List (Inline Editable)

List - Detail - Child Item List pattern is used to show list of child items for an item detail. With this pattern, List route is used to load list of items and display a table view. It also includes Outlet to render detail. Detail route is used to display item details and to carry out actions on an item. Detail view includes outlet to load child item list.

-------------      -------------
| LIST      |      | Detail    |
|           |      |           |
| Outlet    | ->   | --------  |
-------------      | Editable  |
                   | Child     |
                   | Item List |
                   -------------

-------------      -------------
| LIST      |      | Detail    |
|           |      |           |
| Outlet    | ->   | --------  |
-------------      | Editable  |
                   | Child     |
                   | Item List |
                   -------------

In RemixFast, you can create above pattern by dropping a list control, like editable table on to a detail/form view. This will results in following routes being created

__app\routes\item.tsx => Item List
__app\routes\item\$itemId.tsx => Item Detail
__app\routes\item\$itemId\childItem.tsx => Child Item List (non navigable route)

__app\routes\item.tsx => Item List
__app\routes\item\$itemId.tsx => Item Detail
__app\routes\item\$itemId\childItem.tsx => Child Item List (non navigable route)

With above pattern, item and child items are created as an atomic unit. Route $itemId.tsx will handle creating a parent item, and list of child items. It also supports updating parent detail, child items as well as atomic delete. Child Item List is only used to retrieve child items for given parent.

List - Detail - Child Item List (Inline Non Editable)

A variation on above pattern is where child item list is included in Detail View, but it not editable. Child Item List includes its own outlet and it used to display child item details.

-------------      -------------
| LIST      |      | Detail    |
|           |      |           |
| Outlet    | ->   | --------  |
-------------      | Child     |
                   | Item List |    -------------
                   | Outlet    | -> | Child     |
                   -------------    | Item      |
                                    | Detail    |
                                    -------------

-------------      -------------
| LIST      |      | Detail    |
|           |      |           |
| Outlet    | ->   | --------  |
-------------      | Child     |
                   | Item List |    -------------
                   | Outlet    | -> | Child     |
                   -------------    | Item      |
                                    | Detail    |
                                    -------------

In RemixFast, you can create above pattern by dropping a list control, like table or car list on to a detail/form view. This will results in following routes being created

__app\routes\item.tsx => Item List
__app\routes\item\$itemId.tsx => Item Detail
__app\routes\item\$itemId\childItem.tsx => Child Item List (non navigable route)
__app\routes\item\$itemId\childItem.$childItemId.tsx => Child Item Detail

__app\routes\item.tsx => Item List
__app\routes\item\$itemId.tsx => Item Detail
__app\routes\item\$itemId\childItem.tsx => Child Item List (non navigable route)
__app\routes\item\$itemId\childItem.$childItemId.tsx => Child Item Detail

With above pattern, item and child items are treated as separate entities. You must first create parent and then add one or more child items. Also child items are edited independently of parent item.

List - List - Detail

List - List - Detail pattern is primarily used for Admin and Configuration routes. Also known as List of List routes, parent route will have multiple nested list - detail routes.

----------      ----------    ----------
| LIST   |      | List   |    | Detail |
|        |      |        |    |        |
| Outlet | ->   | Outlet | -> |        |
----------      ----------    ----------

----------      ----------    ----------
| LIST   |      | List   |    | Detail |
|        |      |        |    |        |
| Outlet | ->   | Outlet | -> |        |
----------      ----------    ----------

In RemixFast, you can create above pattern by using Config template and adding one or more models to config list. This will results in following routes being created

__app\routes\config.tsx => Config List
__app\routes\config\item.tsx => Item List
__app\routes\config\item\$itemId.tsx => Item Detail

__app\routes\config.tsx => Config List
__app\routes\config\item.tsx => Item List
__app\routes\config\item\$itemId.tsx => Item Detail

List - List, List ...

List - List, List ... pattern is primarily used for Dashboard and Report route.

----------      ----------
| List   |      | List    |
|        |      |         |
|        |      |         |
----------      ----------

                ----------
                | List   |
                |        |
                |        |
                ----------

----------      ----------
| List   |      | List    |
|        |      |         |
|        |      |         |
----------      ----------

                ----------
                | List   |
                |        |
                |        |
                ----------

In RemixFast, you can create above pattern by using Dashboard template and adding one or more dashboard widgets. Report template will result in similar route pattern, except that list might have child list route as well for Form based aggregate report with child grid views.

This will results in following routes being created

__app\routes\dashboard.tsx => Dashboard
__app\routes\dashboard\item.tsx => Item List (non navigable route)

__app\routes\dashboard.tsx => Dashboard
__app\routes\dashboard\item.tsx => Item List (non navigable route)

__app\routes\report.tsx => Report List
__app\routes\report\item.tsx => Item List (non navigable route)
__app\routes\report\item\$itemId.childItem.tsx => Child Item List (non navigable route)

__app\routes\report.tsx => Report List
__app\routes\report\item.tsx => Item List (non navigable route)
__app\routes\report\item\$itemId.childItem.tsx => Child Item List (non navigable route)