Mettons en place notre navigation

Bonjour Moussa,

Absolument je suis en train de faire une mise à jour. Il faut utiliser la même version que moi.

Bonjour à tous,

Je n'arrivais pas à garder le orange sur le lien actif suite aux nombreuses modifications dans React Router.

Voici le lien décrivant les changements de la V5 vers la v6 de React Router ( Liens ) et l'extrait qui nous intéresse le plus pour cette session:

Rename <NavLink exact> to <NavLink end>
This is a simple renaming of a prop to better align with the common practices of other libraries in the React ecosystem.

Remove activeClassName and activeStyle props from <NavLink />
As of v6.0.0-beta.3, the activeClassName and activeStyle props have been removed from NavLinkProps. Instead, you can pass a function to either style or className that will allow you to customize the inline styling or the class string based on the component's active state.

<NavLink
  to="/messages"
- style={{ color: 'blue' }}
- activeStyle={{ color: 'green' }}
+ style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}
>
  Messages
</NavLink>
<NavLink
  to="/messages"
- className="nav-link"
- activeClassName="activated"
+ className={({ isActive }) => "nav-link" + (isActive ? " activated" : "")}
>
  Messages
</NavLink>

-  "exact" n'existe plus et doit etre remplacé par "end" quand on utilise <NavLink/>

- activeClassName et activeStyle n'existe plus et doivent être remplacés par une fonction utilisant "isActive" pou savoir si la route est active ou non.

Je ne sais pas si la solution que j'ai trouvée est la meilleure mais je vous transmet le code que j'ai écris:

function ItemNavBar (props){

    //Méthodes

    //JSX
    return (
        <li className={styles.ItemNavBar}>
            <NavLink
            to={props.to}
            style={({isActive}) => isActive ? {color: '#fb743e',}: undefined }
            end>
                {props.children}
            </NavLink>
        </li>
    );

};

.ItemNavBar{
    margin: 10px;
}

.ItemNavBar a{
    text-decoration: none;
    color: #383e56;
}

.ItemNavBar a:hover,
.ItemNavBar a:focus{
    color: #fb743e;
}