Dev.to

A Symfony - React SPA application. The Reload problem

Introduction In this article, I would like to share with you a problem I encountered while developing a SPA in React within a Symfony project and how I resolved it. The Context I'm working on a Symfony based application which uses Symfony UX to integrate a React-SPA frontend within the Symfony application. The React frontend is loaded using a symfony controller which renders a twig file which renders the main react component: #[Route('/app', name: 'get_app', methods: ['GET'])] public function getApp(): Response { return $this->render('App.html.twig'); } The twig file simply renders the main react component which loads the react SPA. {% block title %}Welcome!{% endblock %} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %} The react main AppComponent looks like this: export default function App() { const wallet: Wallet = useStellarWallet(WalletNetwork.TESTNET); return ( ); } As you can see, it uses the React Router component to define the routes tree. The Problem I use the react-router to manage the react SPA navigation within the useNavigate hook. This is an efficient way to navigate between routes and it works like a charm. The problem is that, as I'm integrating react within a Symfony application, if I reload the application (on the browser), I get a Symfony error which tells me that such route does not exist. This is normal since the routes are defined in react, not in Symfony so the Symfony router cannot find them. A partial solution The first thing to do I thought about was to allow an slug on the "get_app" controller so that it would look like this: #[Route('/app', name: 'get_app', methods: ['GET'])] #[Route('/app/{slug}', name: 'get_app_with_slug', methods: ['GET'])] public function getApp(): Response { return $this->render('App.html.twig'); } This works when the slug value is a simply string like this: https://127.0.0.1:8000/app/home-investor But the symfony router will throw an error if the slug part contains a route with extra segments: https://127.0.0.1:8000/app/project/2/invest This is because the route "/app/{slug}" only captures a single segment after "/app/". This means that any URL with more than one segment after "/app/" will not match this route. For example, in the URL "https://127.0.0.1:8000/app/project/2/invest", there are three segments after "/app/" (project, 2, invest), which causes it not to match the route definition. The Solution The solution I finally chose involved a series of changes both in the backend part (Symfony) and in the frontend part (react). Let's start with the Symfony part. Changes on the Symfony part The first change of the symfony part was to create a Kernel Subscriber to catch the incoming request using the Symfony KernelEvents::REQUEST event. Let's see the code: public static function getSubscribedEvents(): array { return [ KernelEvents::REQUEST => 'onRequest' ]; } public function onRequest(RequestEvent $event): void { $request = $event->getRequest(); if (preg_match('#^\/app\/#', $request->getRequestUri())) { $pathSlug = preg_replace('#^\/app\/#', '', $request->getRequestUri()); $url = $this->router->generate('get_app', ['qslug' => $pathSlug]); $event->setResponse(new RedirectResponse($url)); } } The onRequest function gets the Symfony Request object and extracts the "react route path" from the request uri. Then, it generates the "get_app" route passing it a parameter named "qslug" with the react route path value. Finally, it sets the new response to the event as a Symfony RedirectResponse. The second change involves modifying the "get_app" controller so that it passes the react route path to the App.html.twig file. #[Route('/app', name: 'get_app', methods: ['GET'])] public function getApp(#[MapQueryParameter] ?string $qslug): Response { return $this->render('App.html.twig', ['pathSlug' => $qSlug]); } Finally, The twig file also has to pass the slug to the react app component. Changes on the React part Now in the react part, I needed to check whether this path had a value and, if so, navigate to it. First of all, I created a hook named "useReloadedRoute": export const useReloadedRoute = (path?: string) => { if(path){ localStorage.setItem('route_to_redirect', path); } const getRouteToNavigate = (

Feb 15, 2025 - 11:36
 0
A Symfony - React SPA application. The Reload problem

Introduction

In this article, I would like to share with you a problem I encountered while developing a SPA in React within a Symfony project and how I resolved it.

The Context

I'm working on a Symfony based application which uses Symfony UX to integrate a React-SPA frontend within the Symfony application. The React frontend is loaded using a symfony controller which renders a twig file which renders the main react component:

#[Route('/app', name: 'get_app', methods: ['GET'])]
public function getApp(): Response 
{
    return $this->render('App.html.twig');
}

The twig file simply renders the main react component which loads the react SPA.



    
         charset="utf-8" />
         http-equiv="X-UA-Compatible" content="IE=edge" />
         name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         name="description" content="" />
         name="author" content="" />
        </span><span class="cp">{%</span> <span class="k">block</span> <span class="nv">title</span> <span class="cp">%}</span>Welcome!<span class="cp">{%</span> <span class="k">endblock</span> <span class="cp">%}</span><span class="nt">
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    
    
         {{ react_component('App') }} >

The react main AppComponent looks like this:

export default function App() {

    const wallet: Wallet = useStellarWallet(WalletNetwork.TESTNET);

    return (
      <Fragment>
        <CssBaseline />
        <WalletContext.Provider value={wallet}>
          <Router>
            <Routes>
              <Route path="/login" element={<SignIn />} />
              <Route path="/app" element={<ProtectedRoute children={<Layout /> } /> } >
                  <Route element={<Home />} />
                  <Route path="home-investor" element={<HomeInvestor />} />
                  <Route path="blogs" element={<Blogs />} />
                  <Route path="create-project" element={<CreateInvestmentProject />} />
                  <Route path="project/:id/start" element={<StartInvestmentProject />} />
                  <Route path="project/:id/invest" element={<SendInvestmentDeposit />} />
              Route>
            Routes>
          Router>
        WalletContext.Provider>
    Fragment>
  );
}

As you can see, it uses the React Router component to define the routes tree.

The Problem

I use the react-router to manage the react SPA navigation within the useNavigate hook. This is an efficient way to navigate between routes and it works like a charm.
The problem is that, as I'm integrating react within a Symfony application, if I reload the application (on the browser), I get a Symfony error which tells me that such route does not exist. This is normal since the routes are defined in react, not in Symfony so the Symfony router cannot find them.

A partial solution

The first thing to do I thought about was to allow an slug on the "get_app" controller so that it would look like this:

#[Route('/app', name: 'get_app', methods: ['GET'])]
#[Route('/app/{slug}', name: 'get_app_with_slug', methods: ['GET'])]
public function getApp(): Response 
{
    return $this->render('App.html.twig');
}

This works when the slug value is a simply string like this:

https://127.0.0.1:8000/app/home-investor

But the symfony router will throw an error if the slug part contains a route with extra segments:

https://127.0.0.1:8000/app/project/2/invest

This is because the route "/app/{slug}" only captures a single segment after "/app/". This means that any URL with more than one segment after "/app/" will not match this route. For example, in the URL "https://127.0.0.1:8000/app/project/2/invest", there are three segments after "/app/" (project, 2, invest), which causes it not to match the route definition.

The Solution

The solution I finally chose involved a series of changes both in the backend part (Symfony) and in the frontend part (react). Let's start with the Symfony part.

Changes on the Symfony part

The first change of the symfony part was to create a Kernel Subscriber to catch the incoming request using the Symfony
KernelEvents::REQUEST event. Let's see the code:

public static function getSubscribedEvents(): array
{
    return [
        KernelEvents::REQUEST   => 'onRequest'
    ];
}

public function onRequest(RequestEvent $event): void
{
   $request = $event->getRequest();
   if (preg_match('#^\/app\/#', $request->getRequestUri())) {
       $pathSlug  = preg_replace('#^\/app\/#', '', $request->getRequestUri());
       $url = $this->router->generate('get_app', ['qslug' => $pathSlug]);
       $event->setResponse(new RedirectResponse($url));
   }
}

The onRequest function gets the Symfony Request object and extracts the "react route path" from the request uri. Then, it generates the "get_app" route passing it a parameter named "qslug" with the react route path value.
Finally, it sets the new response to the event as a Symfony RedirectResponse.

The second change involves modifying the "get_app" controller so that it passes the react route path to the App.html.twig file.

#[Route('/app', name: 'get_app', methods: ['GET'])]
public function getApp(#[MapQueryParameter] ?string $qslug): Response 
{
    return $this->render('App.html.twig', ['pathSlug' => $qSlug]);
}

Finally, The twig file also has to pass the slug to the react app component.



    
    
         {{ react_component('App', {pathSlug: pathSlug}) }} >