---
title: Configure Route
---

# Configure Route

Describes the page route expression and `TabBar` (if any) for an app. The configuration file `src/routes.config.ts` is managed in the following format:

```ts
import { Routes, TabBar } from '@ray-js/types';

export const routes: Routes = [];
export const tabBar: TabBar = {};
```

## Route object

You can export a route object in this declaration `export const routes = []`. The following example shows a complete route object:

```js
{
  id: 'detail',
  route: '/detail/:uid',
  path: '/pages/detail/index',
}
```

Note: For the routes with the same ID, the latest one will overwrite the earlier ones. Make sure the routes are prioritized as required.

### id

The unique ID of a route. This setting is optional.

### route

The path expression of a route. This setting is required.

> The expression must follow the rules specified in [path-to-regexp](https://github.com/pillarjs/path-to-regexp).

### path

The address of the target page component. This setting is required.

## tabBar object

Describes the menu items in a navigation bar specified by `tabBar`.

You can export the object in this declaration `export const tabBar = {}`.

Comply with the following constraints:

```ts
type TabBar = {
  /**
   * The text color in a navigation bar.
   */
  textColor?: string;
  /**
   * The highlighted text color in a navigation bar.
   */
  selectedColor?: string;
  /**
   * The background color of the navigation bar.
   */
  backgroundColor?: string;
  /**
   * The list in the navigation bar.
   */
  list?: RequireOnlyOne<
    {
      text: string; // The name of a menu item in the navigation bar.
      icon? : string; // The icon of a menu item in the navigation bar.
      activeIcon? : string; // The highlighted icon of a menu item in the navigation bar.
      id: string; // Corresponds with `routes` if this setting is provided.
      route: string;
    },
    'id' | 'route'
  >[];
};
```

The icon and activeIcon properties only support local images, and the image paths should be absolute addresses.

For example, if you create the files `public/images/tabbar/home.png` and `public/images/tabbar/home-active.png` in the root directory, the corresponding configuration would be:

```json
{
  "icon": "/images/tabbar/home.png",
  "activeIcon": "/images/tabbar/home-active.png"
}
```