# Advanced Routing of pages

The advanced routing system relies on a **url-pattern library**, and configuration can be done in the `app.json` file.

## Named Segments

Named segments allows you to define dynamic parts of your URLs.

They start with a colon `:` followed by a name, which must be at least one character in the regex character set `[a-zA-Z0-9]`.

**Matching Named Segments**

When matching, a 'named segment' consumes all characters in the regex character set `[a-zA-Z0-9-_~ %]`. A named segment match stops at `/`, `.`, `...` but not at `_`, `-`, `,`, `%`, etc.

**Multiple Occurrences**

If a 'named segment' **name** occurs more than once in the pattern string, the multiple results are stored in an array on the returned object. This enables handling scenarios where multiple instances of the same named segment exist in the URL.

```javascript
var pattern = new UrlPattern('/api/users/:ids/posts/:ids');
pattern.match('/api/users/10/posts/5');
// Output: { ids: ['10', '5'] }
```

### Configuration in `app.json`

The routing configuration is done in the `app.json` file. You can specify the URL patterns and named segments in this configuration to define how the routing should behave for your application.

> Here's an example on how URLs are configured in `app.json` file

```json
{
    "routes": [
        {
            "path": "/",
            "view": "features/my-feature/home.tsx"
        },
        {
            "path": "/auth/login",
            "view": "features/my-feature/login.tsx"
        },
        {
            "path": "/items/:itemId",
            "view": "features/my-feature/catalogue-details.tsx"
        },
        {
            "path": "/items/results/:keyword",
            "view": "features/my-feature/search-results.tsx"
        }
    ]
}
```

> MagicJS provides a flexible and powerful advanced routing system through the use of url-pattern library. By understanding how to define patterns and configure named segments in `app.json`, you can create dynamic and customizable routes for your application.

> To know more about the url-pattern library, [click here](https://www.npmjs.com/package/url-pattern).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://skyslit.gitbook.io/magicjs/advanced-guide/advanced-routing-of-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.