react-router-dom v6 : suppression de activeClassName

Merci pour toutes les aides que tu as posté Benjamin je prépare la nouvelle mise à jour pour la rentrée

• J'utilise aussi React router V6 et j'ai l'impression que le props.match.params.id n'est plus d'actualité.
•  
• il faut importer le hooks : import { useParams } from "react-router-dom";
•  
• puis stocker l'id dans une variable : let { id } = useParams();
•  
• puis l'utiliser : <h1>articles page ({id})</h1>
•  
• parcontre je sais pas si ce code est valide mais c'est la solution que j'ai trouvé en fouillant les forums.

Hello Louis Nicolas, cela fait quelques vidéos que je ne peux pas avancer vu que j'ai pas la même chose que toi, je fais des recherches mais je reste limité, ça doit être à cause de la version de react-router-dom, comment faire pour pouvoir suivre les vidéos et avoir la même chose ? Qu'elle version tu utilises ? Merci

Hello Maxime, la formation est en complète transformation, le super travail de Benjamin permet d'avancer sans problème

Salut Maxime, en effet, j'ai effectué la formation et j'ai mis sous chaque session en commentaire la solution avec react router v6. Donc en attendant l'upgrade de la formation n'hésite pas à regarder les commentaires sous chaque session ;)

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 aussi: https://upmostly.com/tutorials/how-to-check-my-react-version-and-update-it#:~:text=To%20check%20which%20React%20version,of%20those%20should%20be%20React

Bonjour,

Il semblerait que <NavLink> suffit pour la classe active, je n'ai rien rajouté et ça marche, voilà mon code:

import React from 'react'
import { NavLink } from 'react-router-dom'
import classes from './navigationitem.module.css'

function NavigationItem(props) {
    return(
        <>
            <li className={classes.NavigationItem}>
                <NavLink to={props.to}>{props.children}</NavLink>
            </li>
        </>
    );
}

export default NavigationItem;

Quand j'utilise exact, ça marche mais j'ai une erreure dans la console:

index.js:1 Warning: Received `true` for a non-boolean attribute `exact`.

If you want to write it to the DOM, pass a string instead: exact="true" or exact={value.toString()}.
    at a
    at LinkWithRef (http://localhost:3000/static/js/vendors~main.chunk.js:33806:7)
    at NavLinkWithRef (http://localhost:3000/static/js/vendors~main.chunk.js:33851:23)
    at li
    at NavigationItem (http://localhost:3000/static/js/main.chunk.js:792:22)
    at ul
    at Navigation
    at nav
    at div
    at header
    at Header
    at Layout (http://localhost:3000/static/js/main.chunk.js:1591:21)
    at div
    at App
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:35378:15)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:33714:5)

Re-bonjour,

malgré ce code sur home.js, le state n'apparait pas dans components et je n'arrive pas à le récupérer du coup, j'imagine que ça a quelque chose à voir avec la version de react, quelqu'un a une solution?

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

function Home() {
    return (
        <>
        <h1>Accueil</h1>
        <Link to="/articles/1"> Voir mon article </Link>
        <Link 
        to={{
            pathname: './articles/1',
            // hash: '#projets'
            // search: '?order=new'
            state: {fromHome: true}
        }}
        style={{marginLeft : '15px'}}>Lien vers une ancre</Link>
        </>
    )
}

export default Home

Bonjour !  J'utilise la version 6.8.2 de react-router-dom. Voici mon composant 'Contact.js' // Librairies

 Je rencontre le probleme suivant ```telephone

2Contact.js:19 Uncaught TypeError: Cannot read properties of undefined (reading 'push')

    at callClickedHandler (Contact.js:19:1)

    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

    at invokeGuardedCallback (react-dom.development.js:4277:1)

    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)

    at executeDispatch (react-dom.development.js:9041:1)

    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)

    at processDispatchQueue (react-dom.development.js:9086:1)

    at dispatchEventsForPlugins (react-dom.development.js:9097:1)

    at react-dom.development.js:9288:1```. Comment resoudre le probleme svp ?

Alors, si comme moi useParams() ne fonctionne pas, c'est le script 4.0.2
Une fois changé en 5.0.1, un nouveau "yarn" (ou "npm i") afin de tout réinstaller et ça fonctionne parfaitement