re-render requete ajax

Bonjour, je souhaite mettre à jour ma page lors du changement de la route. Au premier chargement l'affichage se fait correctement depuis une autre page, mais quand je suis sur une page de ce type, il n'y a que la route qui se met à jour, pas la page.
Voici mon code :

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
import React, {useEffect, useState} from 'react';
import axios from 'axios';
import ReactHtmlParser from 'react-html-parser';
import {NavLink} from "react-router-dom";
import {withRouter} from 'react-router-dom'
import CmsPagination from '../services/CmsPagination'
 
const CmsPages = ({history,match}) => {
    const [cms, setCms] = useState([]);
    const [page, setPage] = useState(CmsPagination.getUri(match.url));
 
    history.listen((location) => {
        console.log(location.pathname);
        setPage(CmsPagination.getUri(location.pathname));
        console.log(page);
        console.log('uri'+' ' + CmsPagination.getUri(location.pathname))
    });
 
 
    let options = {weekday: "long", year: "numeric", month: "long", day: "numeric"};
 
    useEffect(() => {
        axios.get('/api' + page )
            .then(response => response.data)
            .then(data => setCms(data['hydra:member']))
            .catch(error => console.log(error.response));
    }, []);
    return (
        <>
            {cms.map(c =>
                <div className="container" key="{c.id}">
                    <div className="section">
                        <h5 className="pagetitle">{c.title}</h5>
                        <p>mis à jour le {new Date(c.updatedAt).toLocaleDateString('fr-FR', options)}.</p>
                        {ReactHtmlParser(c.content)}
                    </div>
                </div>
            )}
        </>
    );
};

Je ne sais pas ce que je manque, je pensais qu'en mettant à jour avec setPage c’était suffisant.
D'avance merci

Salut,

je pense que c'est pcq dans ton useEffect, tu as spécifié un tableau vide en 2ème paramètre.
En faisant cela, l'effet ne se joue qu'au render initial. cf https://fr.reactjs.org/docs/hooks-ef...ipping-effects
Essaye en mettant [page] à la place d'un tableau vide

Merci pour ta réponse mais malheureusement ça n'a rien changé.
De mes tests il ressors que mes deux varaible cms et page ne se mettent pas à jour dans le callback de history.listen.