Le routage avec React est 'bloqué' par Symfony

**AbyDechaine** · 30/09/2022, 11h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**-Nikopol-** · 30/09/2022, 19h55

ton backend est en php donc au rechargement c'est symfony qui fait le routage.
du dois avoir quelque chose de ce type la dans ton mainController ou appController :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
/**
* @Route("/")
*/
public function index (): Response
{
	return $this->render('index.html.twig');
}

donc la route '/' existe et du peut charger ou recharger la page. Idem pour toutes les routes que tu définies dans ton AgencyController. Elles existent et tu peux donc recharger. En revanche ta route '/create' ne semble pas etre définie.

Comme il s'agit d'une SPA, il te faut définir toutes tes routes (sauf celles qui le sont déjà dans un autre controller) dans ton app controller et diriger vers le point d'entrée de ton app react, ton index.html.twig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
/**
* @Route("/....")
* @Route("/route2")
* @Route("/create")
* @Route("/")
*/
 public function index (): Response
{
        return $this->render('index.html.twig');
}
	 */

Le routage avec React est 'bloqué' par Symfony

Symfony PHP

Discussions similaires

Partager

Partager