No route found for "GET http://localhost:8000/create" after a refresh

Question

I have two pages, one to show the list of agencies, and one to add a new one. I can easily access to http://localhost:8000/create from http://localhost:8000, but if I try to reload the page I get the error that no route found for 'GET http://localhost:800/create'

Main.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AgencyList from "./pages/AgencyList"
import AgencyCreate from "./pages/AgencyCreate"
   
function Main() {
    return (
        <Router>
            <Routes>
                <Route exact path="/"  element={<AgencyList/>} />
                <Route  path="/create"  element={<AgencyCreate/>} />
            </Routes>
        </Router>
    );
}
   
export default Main;

Stacktrace of the error :

Symfony\Component\HttpKernel\Exception\NotFoundHttpException:
No route found for "GET http://localhost:8000/create"

  at C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\http-kernel\EventListener\RouterListener.php:128
  at Symfony\Component\HttpKernel\EventListener\RouterListener->onKernelRequest(object(RequestEvent), 'kernel.request', object(TraceableEventDispatcher))
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\event-dispatcher\Debug\WrappedListener.php:115)
  at Symfony\Component\EventDispatcher\Debug\WrappedListener->__invoke(object(RequestEvent), 'kernel.request', object(TraceableEventDispatcher))
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\event-dispatcher\EventDispatcher.php:230)
  at Symfony\Component\EventDispatcher\EventDispatcher->callListeners(array(object(WrappedListener), object(WrappedListener), object(WrappedListener), object(WrappedListener), object(WrappedListener), object(WrappedListener), object(WrappedListener), object(WrappedListener), object(WrappedListener)), 'kernel.request', object(RequestEvent))
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\event-dispatcher\EventDispatcher.php:59)
  at Symfony\Component\EventDispatcher\EventDispatcher->dispatch(object(RequestEvent), 'kernel.request')
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\event-dispatcher\Debug\TraceableEventDispatcher.php:153)
  at Symfony\Component\EventDispatcher\Debug\TraceableEventDispatcher->dispatch(object(RequestEvent), 'kernel.request')
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\http-kernel\HttpKernel.php:129)
  at Symfony\Component\HttpKernel\HttpKernel->handleRaw(object(Request), 1)
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\http-kernel\HttpKernel.php:75)
  at Symfony\Component\HttpKernel\HttpKernel->handle(object(Request), 1, true)
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\http-kernel\Kernel.php:202)
  at Symfony\Component\HttpKernel\Kernel->handle(object(Request))
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\symfony\runtime\Runner\Symfony\HttpKernelRunner.php:35)
  at Symfony\Component\Runtime\Runner\Symfony\HttpKernelRunner->run()
     (C:\Users\TheDr\Desktop\Projets\kooshii\vendor\autoload_runtime.php:29)
  at require_once('C:\\Users\\TheDr\\Desktop\\Projets\\kooshii\\vendor\\autoload_runtime.php')
     (C:\Users\TheDr\Desktop\Projets\kooshii\public\index.php:5)             

Thanks

Answer 1

It looks like /create is a React route but it is caught by Symfony. My guess is when you navigate to /create from React, but if you reload, it is actually the HTTP server that gets the request first (not React) and it's sending that request to Symfony thus the exception.

Since you don't give a lot of details on your app, I'm gonna make some assumptions.

1. Your frontend app is all most all React
2. Your Symfony app is used mostly as an API used by your frontend
3. Your Symfony app public is the root directory of your web server.

So, if all this is true you could use the following approach:

• Make all your API routes start with /api
• Create a catch-all route with the lowest priority (ie: -1)

Then assuming (again) that you are using Symfony 5.1+ and annotations for your routes definition (you could easily change it to attributes should you use PHP 8.x), you could have a DefaultController that looks something like this.

<?php

declare(strict_types=1);

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

final class DefaultController extends AbstractController
{
    /**
     * @Route("/{reactRouting}", name="index", priority="-1", defaults={"reactRouting": null}, requirements={"reactRouting"=".+"})
     */
    public function index(): Response
    {
        return $this->render('default/index.html.twig');
    }
}

Then have all your other routes start with /api/ which is optional but might be a good idea to avoid route collision between React and Symfony.

Since your route /{reactRouting} has the lowest priority, it will be matched only if no other routes are matched (catch-all).