Corriger un composant React Router v6 pour récupérer un article par slug

Question

Bonjour à tous, Je propose la correction du code suivant suite à l'actualisation de la V6 de react-router-dom par rapport au slug . Étant débutant, vos améliorations sont bienvenues ! Merci par avance ! // Librairies import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import classes from './Article.module.css'; import axios from '../../../Config/axios-firebase'; const Article = () => { // STATES const [article, setArticle] = useState({}); // CYCLE DE VIE // ComponentDidMount useEffect(() => { // Challenge : récupération du titre de l'article depuis Firebase // ?orderBy='slug'&equalTo='{slug}' axios .get('/articles.json/?orderBy="slug"&equalTo="' + slug + '"') .then((response) => { // Boucle pour récupération du titre for (let key in response.data) { setArticle({ ...response.data[key], id: key, }); } }) .catch((error) => { console.log(error); }); }, []); // VARIABLES // Variable 1 - slug de l'article const { slug } = useParams(); // Variable 2 - Transformation date locale du pays let date = new Date(article.date).toLocaleDateString('fr-FR'); // Rendu JSX return ( <>

{article.titre}

{/* {props.location.state && props.location.state.fromHome ? (

Cliqué depuis accueil

) : null}*/} ); }; export default Article;

Louis-Nicolas Leuillet · Accepted Answer

Hello Antoine,
Wow, merci pour l'initiative ! Je n'ai rien à dire, tu as d'ailleurs commenté parfaitement ton code pour que chacun puisse comprendre.
Merci beaucoup :)

Antoine Delamare · Answer

De rien !

Corriger un composant React Router v6 pour récupérer un article par slug

Créez des sites internet interactifs avec React 16 et Redux