Le routage avec React est 'bloqué' par Symfony

Bonjour à tous,

Je suis nouveau dans le domaine et j'ai un petit souci avec mon routage, j'utilise Symfony 5.4.3 et PHP 8.1.9
Le souci est le suivant, j'ai une liste d'agence où je peux soit en ajouter une nouvelle, en modifier une, ou la supprimer,
La redirection avec les boutons est parfaite, mais quand je souhaite rentrer le lien manuellement, ou quand je rafraichit la page. J'obtiens une erreur Symfony 404 : No route found for "GET http://localhost:8000/create"

Je voulais donc avoir votre point de vus afin de m'aider,

Main.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import AgencyCreate from "./pages/Agency/AgencyCreate"
import AgencyEdit from "./pages/Agency/AgencyEdit"
import AgencyList from "./pages/Agency/AgencyList"
 
function Main() {
    return (
        <Router>
            <Routes>
                <Route path="/"         element={<AgencyList/>} />
                <Route path="/create"   element={<AgencyCreate/>} />
                <Route path="/edit/:id" element={<AgencyEdit/>} />
            </Routes>
        </Router>
    );
}
 
export default Main;

index.js

Code:

1
2
3
4
5
6
7
8
9
10
11
 
import React from "react";
import ReactDOMClient from "react-dom/client";
import Main from './Main';
import './styles/app.css';
import './bootstrap';
 
if( document.getElementById('app') ) {
    const app = ReactDOMClient.createRoot(document.getElementById("app"))
    app.render(<Main/>)
}

La page AgencyList qui fonctionne parfaitement, même après un rafraichissement

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
import React,{ useState, useEffect} from 'react';
import { Link } from "react-router-dom";
import Layout from "../../components/Layout"
import Swal from 'sweetalert2'
import axios from 'axios';
 
function AgencyList() {
    const[ agencyList, setAgencyList ] = useState([])
 
    useEffect(() => {
        fetchAgencyList()
    }, [])
 
    const fetchAgencyList = () => {
        axios.get( '/api/agency' )
        .then( function( response ) {
            setAgencyList( response.data );
        })
        .catch( function( error ) {
            console.log( error );
        })
    }
 
    const handleDelete = ( id ) => {
        Swal.fire({
            title: 'Etes-vous certain ?',
            text: 'L\'agence sera supprimée définitivement et vous ne pourrez plus retourner en arrière!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Oui, la supprimer !'
          }).then( ( result ) => {
            if( result.isConfirmed ) {
                axios.delete( `/api/agency/${id}` )
                .then( function( response ) {
                    Swal.fire({
                        icon: 'success',
                        title: 'L\'agence a bien été supprimée !',
                        showConfirmButton: false,
                        timer: 1500
                    })
                    fetchAgencyList()
                })
                .catch( function( error ) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Une erreur est survenue, merci de réessayer!',
                        text: 'Si le problème persiste, contactez un administrateur',
                        showConfirmButton: false,
                        timer: 1500
                    })
                });
            }
          })
    }
 
    return (
        <Layout>
           <div className="container">
            <h2 className="text-center mt-5 mb-3">Symfony Agency Manager</h2>
                <div className="card">
                    <div className="card-header">
                        <Link 
                            className="btn btn-outline-primary"
                            to="/create">Créer une nouvelle agence
                        </Link>
                    </div>
                    <div className="card-body">
 
                        <table className="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Nom</th>
                                    <th width="240px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                { agencyList.map( ( agency, key ) => {
                                    return (
                                        <tr key={key}>
                                            <td>{agency.name}</td>
                                            <td>
                                                <Link
                                                    className="btn btn-outline-success mx-1"
                                                    to={`/edit/${agency.id}`}>
                                                    Edit
                                                </Link>
                                                <button 
                                                    onClick={()=>handleDelete(agency.id)}
                                                    className="btn btn-outline-danger mx-1">
                                                    Delete
                                                </button>
                                            </td>
                                        </tr>
                                    )
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </Layout>
    );
}
 
export default AgencyList;

La page AgencyCreate.js pour illustrer

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
import React, {useState} from 'react';
import { Link } from "react-router-dom";
import Layout from "../../components/Layout"
import Swal from 'sweetalert2'
import axios from 'axios';
 
function AgencyCreate() {
    const [name, setName] = useState('')
    const [isSaving, setIsSaving] = useState(false)
 
    const handleSave = () => {
        setIsSaving( true )
        let formData = new FormData()
        formData.append( 'name', name )
        console.log(name.length != 0)
        if( name.length != 0 ) {
            axios.post( '/api/agency', formData )
            .then( function( response ) {
                Swal.fire({
                    icon: 'success',
                    title: 'Agence créée avec succès !',
                    showConfirmButton: false,
                    timer: 1500
                })
                setIsSaving( false )
                setName( '' )
            })
            .catch( function( error ) {
                Swal.fire({
                    icon: 'error',
                    title: 'Une erreur est survenue, merci de réessayer!',
                    text: 'Si le problème persiste, contactez un administrateur',
                    showConfirmButton: false,
                    timer: 1500
                })
                setIsSaving( false )
            });
        }
        else {
            Swal.fire({
                icon: 'error',
                title: 'Une erreur est survenue, merci de réessayer!',
                text: 'Si le problème persiste, contactez un administrateur',
                showConfirmButton: false,
                timer: 1500
            })
        }
    }
 
    return (
        <Layout>
            <div className="container">
                <h2 className="text-center mt-5 mb-3">Créer une nouvelle agence</h2>
                <div className="card">
                    <div className="card-header">
                        <Link 
                            className="btn btn-outline-info float-right"
                            to="/">Voir toutes les agences
                        </Link>
                    </div>
                    <div className="card-body">
                        <form>
                            <div className="form-group">
                                <label htmlFor="name">Nom</label>
                                <input 
                                    onChange={( event ) => { setName( event.target.value ) }}
                                    value={name}
                                    type="text"
                                    className="form-control"
                                    id="name"
                                    name="name"/>
                            </div>
                            <button 
                                disabled={isSaving}
                                onClick={handleSave} 
                                type="button"
                                className="btn btn-outline-primary mt-3">
                                Créer une agence
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </Layout>
    );
}
 
export default AgencyCreate;

AgencyController.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<?php
 
namespace App\Controller;
 
use App\Entity\Agency;
use DateTime;
use Doctrine\Persistence\ManagerRegistry;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
 
#[Route('/api', name: 'api_')]
class AgencyController extends AbstractController
{
    #[Route('/agency', name: 'agency_index', methods: 'GET')]
    public function index( ManagerRegistry $doctrine ): Response
    {
        $agencies = $doctrine->getRepository( Agency::class )->findAll();
 
        $data = [];
 
        foreach( $agencies as $agency ) {
           $data[] = [
               'id'         => $agency->getId(),
               'name'       => $agency->getName(),
               'created_at' => $agency->getCreatedAt(),
               'updated_at' => $agency->getUpdatedAt(),
               'removed'    => $agency->isRemoved(),
           ];
        }
 
        return $this->json( $data );
    }
 
    #[Route('/agency', name: 'agency_new', methods: 'POST')]
    public function new( ManagerRegistry $doctrine, Request $request ): Response
    {
        $entityManager = $doctrine->getManager();
 
        $agency = new Agency();
        $agency->setName     ( $request->request->get( 'name' ) )
               ->setCreatedAt( new DateTime()                   )
               ->setUpdatedAt( new DateTime()                   )
               ->setRemoved  ( false                            );
 
        $entityManager->persist( $agency );
        $entityManager->flush();
 
        return $this->json( 'Nouvelle agence créée avec l\'identifiant : ' . $agency->getId() );
    }
 
    #[Route('/agency/{id}', name: 'agency_show', methods: 'GET')]
    public function show( ManagerRegistry $doctrine, int $id ): Response
    {
        $agency = $doctrine->getRepository( Agency::class )->find( $id );
 
        if( !$agency ) {
            return $this->json( 'Aucune agence trouvée pour l\'identifiant : ' . $id, 404 );
        }
 
        $data = [
            'id'         => $agency->getId(),
            'name'       => $agency->getName(),
            'created_at' => $agency->getCreatedAt(),
            'updated_at' => $agency->getUpdatedAt(),
            'removed'    => $agency->isRemoved(),
        ];
 
        return $this->json( $data );
    }
 
    #[Route('/agency/{id}', name: 'agency_edit', methods: 'PUT, PATCH')]
    public function edit( ManagerRegistry $doctrine, Request $request, int $id ): Response
    {
        $entityManager = $doctrine->getManager();
        $agency = $entityManager->getRepository( Agency::class )->find( $id );
 
        if( !$agency ) {
            return $this->json( 'Aucune agence trouvée pour l\'identifiant : ' . $id, 404 );
        }
 
        $content = json_decode( $request->getContent() );
 
        $agency->setName( $content->name )
               ->setRemoved( $content->removed )
               ->setUpdatedAt( new DateTime() );
 
        $entityManager->flush();
 
        $data = [
            'id'         => $agency->getId(),
            'name'       => $agency->getName(),
            'created_at' => $agency->getCreatedAt(),
            'updated_at' => $agency->getUpdatedAt(),
            'removed'    => $agency->isRemoved(),
        ];
 
        return $this->json( $data );
    }
 
    #[Route('/agency/{id}', name: 'agency_delete', methods: 'DELETE')]
    public function delete( ManagerRegistry $doctrine, int $id ): Response
    {
        $entityManager = $doctrine->getManager();
        $agency = $entityManager->getRepository( Agency::class )->find( $id );
 
        if( !$agency ) {
            return $this->json( 'Aucune agence trouvée pour l\'identifiant : ' . $id, 404 );
        }
 
        $entityManager->remove( $agency );
        $entityManager->flush();
 
        return $this->json( 'Suppression de l\'agence avec l\'identifiant : ' . $id );
    }
}

Et la stacktrace de l'erreur

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
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)

Si vous pouvez m'aider à me débloquer ça serait super,
Merci