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.

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

{
    "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.