Believemy logo purple
Connexion
Discussions

Obligation de passer par le hook useParams...

Image

Alors, de mon côté, un console.log(props) me renvoit un objet vide. J'ai un peu galérer à trouver une solution mais avec la doc de React Router (qui décidemment est super bien faite !) j'ai pu trouver une solution.

Du coup j'ai utilisé le hook useParams de react-routeur qui lui me permet d'utiliser la fonction useParams() qui avec props en paramètre me renvoit bien l'ID pour le coup. C'est finalement plus simple aussi.

Voici le code de mon composant Article :

 

//Lib

import React from "react";
import { useParams } from "react-router-dom"


function Article(props) {
    let getId = useParams(props);
    return <h1>Ma page Article ({getId.id})</h1>
}
export default Article;

 

Je ne sais pas si c'est dû aussi à la montée de version v5 > v6 Louis Nicolas, qu'en penses-tu ? Merci de ton retour :)

3 réponses
Image
Thibault Delt
Le 03/11/2022 à 08:55

Je confirme le console.log(props) est vide...

 

Pour ceux qui veulent faire leurs propre recherches je vous invite à consulter les docs suivants:

- Chapitre "Reading URL Parameters" => Reading URL Parameters

-  Chapitre "Advantage of <Route element/>"=> Upgrading from V5

 

Merci Raven et bon courage à tous.

Image
Youssouff Lyy
Le 18/11/2022 à 10:37 (modifié le 18/11/2022 à 15:31)

Si comme moi vous galerer vraiment a adapter a la v6 de react pour suivre le cours je vous propose d'utiliser ces commandes sur votre terminal pour utiliser l'ancienne version de react

  1. 1. Désinstallez la version actuelle de react-router-dom

  2.  

  3. npm uninstall -s react-router-dom

  4. //Ou

  5. npm un -s react-router-dom

  6.  

  7. 2. Installer une version v5 spécifique

  8.  

  9. npm install -s react-router-dom@5.3.0

  10. //Ou

  11. npm i -s react-router-dom@5.3.0

voir ici :

https://upmostly.com/tutorials/how-to-check-my-react-version-and-update-it#:~:text=To%20check%20which%20React%20version,of%20those%20should%20be%20React

Image
Antoine Delamare
Le 04/03/2023 à 00:44

Bonjour a tous !

 

Grosse galère pour ma part avec la version 6.8.2 de react-routeur.dom. Serait-il possible de m'aider svp ? Voici le problème que je rencontre.

1) La page Web 'Article' ne s'affiche pas. Tout le reste fonctionne correctement.

 

2) La console me renvoit les 2 messages d'erreur suivants The above error occurred in the <Article> component:

at Article (http://localhost:3000/static/js/bundle.js:521:21) at RenderedRoute (http://localhost:3000/static/js/bundle.js:39561:5) at Routes (http://localhost:3000/static/js/bundle.js:40026:5) at Layout (http://localhost:3000/static/js/bundle.js:751:21) at div at App at Router (http://localhost:3000/static/js/bundle.js:39964:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:38161:5) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
  overrideMethod @ react_devtools_backend.js:2655
  logCapturedError @ react-dom.development.js:18687
  update.callback @ react-dom.development.js:18720
  callCallback @ react-dom.development.js:13923
  commitUpdateQueue @ react-dom.development.js:13944
  commitLayoutEffectOnFiber @ react-dom.development.js:23391
  commitLayoutMountEffects_complete @ react-dom.development.js:24688
  commitLayoutEffects_begin @ react-dom.development.js:24674
  commitLayoutEffects @ react-dom.development.js:24612
  commitRootImpl @ react-dom.development.js:26823
  commitRoot @ react-dom.development.js:26682
  performSyncWorkOnRoot @ react-dom.development.js:26117
  flushSyncCallbacks @ react-dom.development.js:12042
  (anonymous) @ react-dom.development.js:25651

  et ```Warning: React does not recognize the `activeclassName` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `activeclassname` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

    at a

    at LinkWithRef (http://localhost:3000/static/js/bundle.js:38255:7)

    at NavLinkWithRef (http://localhost:3000/static/js/bundle.js:38323:23)

    at li

    at NavigationItem (http://localhost:3000/static/js/bundle.js:447:20)

    at ul

    at Navigation

    at nav

    at div

    at header

    at Header

    at Layout (http://localhost:3000/static/js/bundle.js:751:21)

    at div

    at App

    at Router (http://localhost:3000/static/js/bundle.js:39964:15)

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:38161:5)

printWarning @ react-dom.development.js:86

error @ react-dom.development.js:60

validateProperty$1 @ react-dom.development.js:3757

warnUnknownProperties @ react-dom.development.js:3803

validateProperties$2 @ react-dom.development.js:3827

validatePropertiesInDevelopment @ react-dom.development.js:9541

setInitialProperties @ react-dom.development.js:9830

finalizeInitialChildren @ react-dom.development.js:10950

completeWork @ react-dom.development.js:22193

completeUnitOfWork @ react-dom.development.js:26596

performUnitOfWork @ react-dom.development.js:26568

workLoopSync @ react-dom.development.js:26466

renderRootSync @ react-dom.development.js:26434

performConcurrentWorkOnRoot @ react-dom.development.js:25738

workLoop @ scheduler.development.js:266

flushWork @ scheduler.development.js:239

performWorkUntilDeadline @ scheduler.development.js:533```

 

en relation avec 'NavigationItem.js' // Librairies

import React from 'react';
import { NavLink } from 'react-router-dom';

// Components
import classes from './NavigationItem.module.css';

const NavigationItem = (props) => {
  return (
    <li className={classes.NavigationItem}>
      <NavLink
        exact={props.exact}
        to={props.to}
        activeclassName={classes.active}>
        {props.children}
      </NavLink>
    </li>
  );
};

export default NavigationItem;

, 'Navigation.js' // Librairies

import React from 'react';
import classes from './Navigation.module.css';

// Components
import NavigationItem from './NavigationItem/NavigationItem';

const Navigation = () => {
  return (
    <ul className={classes.Navigation}>
      <NavigationItem exact={true.toString()} to='/'>
        Accueil
      </NavigationItem>
      <NavigationItem to='/articles'>Articles</NavigationItem>
      <NavigationItem exact={true.toString()} to='/contact'>
        Contact
      </NavigationItem>
    </ul>
  );
};

export default Navigation;

 et 'Article.js' import React from 'react';


const Article = (props) => {
  console.log(props.match.params);
  return <h1>Article</h1>;
};

export default Article;
Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le 5 juillet 2022 12:20
Dernière modification le 5 juillet 2022 15:24
Dernière activité le 5 juillet 2022 12:20
Cours : Créez des sites internet interactifs avec React 16 et Redux