Believemy logo purple
Connexion
Discussions

activeClassName ne fonctionne pas avec react-router-dom v6

Image

La solution pour utiliser les classes actives pour react-routeur-dom v6 

 

est d'ajouter ce bout de code className={({ isActive}) => isActive ? classes.active : ''} à la place de ativeClassName, comme ci dessus :

 

 

// Librairies
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} className={({ isActive}) => isActive ? classes.active : ''}>{props.children}</NavLink>
      </li>
   );
}

export default NavigationItem;

 

1 réponse
Image
Sébastien Collin
Le 25/08/2023 à 16:10

Paramètres URL avec react-router-dom V6

 

dans Article.js, il faut importer useParams de react-router-dom et faire ceci

 

 

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


function Article(props) {
   const params = useParams();

   return <h1>Ma page article ({params.id}) </h1>
}

export default Article;

 

Cordialement

 

Sébastiien Collin

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

Informations

Créée le 14 avril 2023 12:50
Dernière activité le 25 août 2023 16:10
Cours : Bienvenue parmi les étudiants de Believemy !