Router - Symfony Routes in JavaScript

Symfony Routes in JavaScript

Add Router to your app.

Generate your Symfony routes' URLs in JavaScript

config/packages/ux_router.yaml

ux_router:
    # Route name patterns exposed to JavaScript
    routes:
        - 'demo_*'

assets/router.js

import { createRouter } from '@symfony/ux-router';
import { routes } from '../var/routes/index.js';

/*
 * This file is part of the Symfony UX Router package.
 *
 * If folder "../var/routes" does not exist, or some routes are missing,
 * you must warmup your Symfony cache to refresh JavaScript routes.
 *
 * If you use TypeScript, you can rename this file to "router.ts" to take advantage of types checking.
 */

export const { path, url } = createRouter({ routes });

UX Router

path('demo_blog_post', {
    slug: ,
    _query: { page:  },
})

Slug

Page

Path with a query string

url('demo_blog_post', {
    slug: ,
})

Slug

Absolute URL

path('demo_about', {
    _locale: ,
})

Locale

Localized route

path('demo_blog_archive', {
    year: ,
})

Year, must match \d{4}

Requirement check

Dumped at cache warmup

How the routes get there.

Nothing is fetched at runtime. A cache warmer writes the routes you expose to disk, and your JavaScript imports them like any other module.

Exposed on purpose

Name patterns, or the expose option of a route, decide what JavaScript can see.

ux_router:
    routes:
        - 'app_*'
        - '!app_admin_*'

Written to disk

The exposed routes end up in one generated module, with TypeScript types next to it.

var/routes/
├── index.js
└── index.d.ts

The same path() and url()

Requirements, defaults, hosts, schemes and the query string behave the way they do in PHP.

import { path, url } from './router.js';

path('app_blog_show', { slug: 'hello', _query: { page: 2 } });
// '/blog/hello?page=2'

url('app_blog_show', { slug: 'hello' });
// 'https://example.com/blog/hello'