Discussions

Mettons en place notre navigation

Image

Bonjour,

je rencontre des notre pour afficher ma navigation, il me semble que la version V5 de react-router-dom de ce cours est oblète. J'ai le même code que toi mais rien ne s'affiche je ne comprends pas l'erreur sur la console. Je te fais une capture .

react-jsx-dev-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at NavigationItem.js:7.
    at NavigationItem (http://localhost:3000/static/js/bundle.js:409:19)
    at ul
    at Navigation
    at div
    at Header
    at Layout (http://localhost:3000/static/js/bundle.js:643:21)
    at div
    at http://localhost:3000/static/js/bundle.js:11241:5
    at div
    at App
    at Router (http://localhost:3000/static/js/bundle.js:43888:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:42109:5)

2 réponses
Image
Louis-Nicolas Leuillet
Le 30/09/2022 à 10:36

Bonjour Moussa,

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

Image
Thibault Delt
Le 01/11/2022 à 16:56

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;
}
Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le September 29, 2022 8:40 PM
Dernière activité le September 29, 2022 8:40 PM