Discussions

react-router-dom v6 : suppression de activeClassName

Image

Je poste ici pour aider les autres étudiants.

 

Suite au passage de React Router en v6, la propriété activeClassName du composant NavLink n'existe plus !

 

Il faut utiliser une fonction ternaire pour intégrer votre module CSS. Voici comment j'ai fait pour ce cours, en suivant la documentation :

 

function NavigationItem(props) {
    return (
        <>
            <li className={classes.NavigationItem}>
                <NavLink
                    exact
                    to={props.to}
                    className={ ({isActive}) =>
                        isActive ? classes.active : undefined
                    }
                >
                {props.children}
                </NavLink>
            </li>
        </>
    )
}

 

La documentation est ici : https://reactrouterdotcom.fly.dev/docs/en/v6/components/nav-link

11 réponses
Image
Louis-Nicolas Leuillet
Le 06/07/2022 à 17:41

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

Image
Loris Daca
Le 03/08/2022 à 13:15
  • 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.
Image
Maxime Brunet
Le 02/10/2022 à 22:39

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

Image
Louis-Nicolas Leuillet
Le 03/10/2022 à 09:29

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

Image
Raven
Le 03/10/2022 à 16:59

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 ;)

Image
Youssouff Lyy
Le 18/11/2022 à 09:42 (modifié le 18/11/2022 à 10:23)

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

Image
Claire-Lise Demettre
Le 13/12/2022 à 11:11

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;
Image
Claire-Lise Demettre
Le 13/12/2022 à 11:43

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)
Image
Claire-Lise Demettre
Le 13/12/2022 à 14:35

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
Image
Antoine Delamare
Le 06/03/2023 à 19:50

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

import React from 'react';
import { Routes as Route } from 'react-router-dom';
import classes from './Contact.module.css';

function Contact(props) {
  // STATES

  // METHODES
  // Méthode - Email
  const emailClickedHandler = () => {
    console.log('email');
    props.history.push('/contact/email');
  };

  // Méthode - Téléphone
  const callClickedHandler = () => {
    console.log('telephone');
    props.history.push('/contact/telephone');
  };

  return (
    <>
      <h1>Contact</h1>
      <button
        onClick={emailClickedHandler}
        className={classes.button}>
        Email
      </button>
      <button onClick={callClickedHandler} className={classes.button}>
        Téléphone
      </button>

      <Route path='/contact/email' element=<p>Email</p> />
      <Route path='/contact/telephone' element=<p>Telephone</p> />
    </>
  );
}

export default Contact;

 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 ?

Image
Simon Honoré
Le 06/07/2023 à 13:47

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 

Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.
Aide spontanée

Informations

Créée le 4 juillet 2022 13:25
Dernière modification le 4 juillet 2022 13:30
Dernière activité le 6 juillet 2023 13:47