Symfony routing examples

routingExamples.md

Paths and routing in Symfony

The Problem

if($event->getRequest()->getPathInfo()=='/fr/_uploader/receipt2/upload'){
    // ...
}

HTML

Paths and URLs manually added and managed across miltiple files and links.

• When a file or path changes dev needs to manually update all anchors across all files.
• Hard to manage & error prone

<a href="contact_us.html">Click Here</a>

Routing

• Table of contents / index of all paths within a project and their respective functionality (controller action).
• Each route has a key that rarely changes
• Keys are used to generate paths

E.g.

# config/routes.yaml
homepage:
    path: /
    controller: App\Controller\PageController::homepage

contact_us:
    path: /contact-us
    controller: App\Controller\ContactController::contactUs

Or quite often we define the routes to be annotations directly in a controller:

# config/routes.yaml
page:
  resource: 'App\Controller\PageController'
  type:     annotation
  prefix: /

// App\Controller\PageController

/**
 * @Route("/contact-us", name="contact_us")
 * @Template()
 */
public function contactUsAction()
{
    //...
}

Retrieving paths from routes

Twig

<a href="{{ path('contact_us') }}">Click here</a>

PHP

class BlogController extends AbstractController
{
    /**
     * @Route("/blog", name="blog_list")
     */
    public function list(): Response
    {
        // generate a URL with no route arguments
        $contactUsPage = $this->generateUrl('contact_us');

        // generate a URL with route arguments
        $userProfilePage = $this->generateUrl('user_profile', [
            'username' => $user->getUserIdentifier(),
        ]);

        // argument to generate different URLs (e.g. an "absolute URL")
        $contactUsPage = $this->generateUrl('contact_us', [], UrlGeneratorInterface::ABSOLUTE_URL);

        // ...
    }
}

JavaScript

Either add the path as an data attbute on an element on the page and get it.

<div id="redirect_container" data-redirect-to="{{ path('contact_us') }}">
    
</div>

// app.js
const redirectContainer = document.querySelector("#redirect_container-cars");
window.location = redirectContainer.dataset.redirectTo;
    

Or better yet, use FOSJSRoutingBundle

// App\Controller\PageController

/**
 * @Route("/contact-us", options={"expose"=true}, name="contact_us")
 * @Template()
 */
public function contactUsAction()
{
    //...
}

// app.js
window.location = Routing.generate('contact_us')

Summary

if($event->getRequest()->getPathInfo()=='/fr/_uploader/receipt2/upload'){
    // ...
}

Should have been

if($event->getRequest()->getPathInfo()== $this->generateUrl('_uploader_upload_receipt2')){
    // ...
}