For Believers.

Probleme surlignage Contact - Navigation Contact

Bonjour,

Utilisant la version 6 de react-router-dom, j'ai pris en compte les modifications de code pour 'Contact.js' et 'App.js' dans l'onget Q&R de Belivemy.

Mon site fonctionne bien, néanmoins je rencontre des problèmes pour maintenir l'onglet de navigation 'Contact'. Lorsque je clique sur le sous-composant 'Téléphone' ou 'Email' depuis 'Contact', l'onglet de navigation 'Contact' n'apparait plus surligné.

Comment est-il possible de résoudre cela svp ?

Merci par avance,

Antoine Delamare

Blockchain & Cie.

6 réponses

Louis-Nicolas Leuillet

Le 09/03/2023 à 14:31

Hello Antoine

Pour ton problème, c'est surtout un problème au niveau de ton code JavaScript pour moi, et pas forcément de version.

Est-ce que le chemin change quand tu cliques sur "Téléphone" ou "Email" ? Pour moi, oui : c'est pour ça que "Contact" n'est plus surligner.

Antoine Delamare

Le 09/03/2023 à 14:46

Bonjour Louis-Nicolas (et par ailleurs merci pour ta formation galvanisante, alors que je débute complètement en React).

Voici le code 'App.js'

// Librairies
import React from 'react';
import './App.css';
import { Routes, Route } from 'react-router-dom';
import routes from './Config/Routes/Routes';

// Components
import Layout from './HOC/Layout/Layout';
import Home from './Containers/Home/Home';
import Contact from './Components/Contact/Contact';
import Articles from './Containers/Articles/Articles';
import Article from './Containers/Articles/Article/Article';
import ManageArticle from './Containers/Admin/ManageArticles/ManageArticles/ManageArticle';

function App() {
  return (
    <div className='App'>
      <Layout>
        <Routes>
          <Route exact path={routes.HOME} element={<Home />} />
          <Route path={routes.CONTACT} element={<Contact />}>
            <Route
              exact
              path={routes.EMAIL}
              element={<p>exemple@exemple.com</p>}
            />
            <Route
              exact
              path={routes.TELEPHONE}
              element={<p>06 06 06 06 06</p>}
            />
          </Route>
          <Route
            exact
            path={routes.ARTICLES}
            element={<Articles />}
          />
          <Route
            path={routes.ARTICLES + '/:slug'}
            element={<Article />}
          />
          <Route
            exact
            path={routes.MANAGE_ARTICLE}
            element={<ManageArticle />}
          />
          <Route path='*' element={<h1>Erreur 404</h1>} />
        </Routes>
      </Layout>
    </div>
  );
}

export default App;

'Navigation.js'

// Librairies
import React from 'react';
import classes from './Navigation.module.css';
import routes from '../../../Config/Routes/Routes';

// Components
import NavigationItem from './NavigationItem/NavigationItem';

const Navigation = () => {
  return (
    <ul className={classes.Navigation}>
      <NavigationItem to={routes.HOME}>Accueil</NavigationItem>
      <NavigationItem to={routes.ARTICLES}>Articles</NavigationItem>
      <NavigationItem to={routes.CONTACT}>Contact</NavigationItem>
      <NavigationItem to={routes.MANAGE_ARTICLE}>
        Ajouter
      </NavigationItem>
    </ul>
  );
};

export default Navigation;

'NavigationItem.js'

// Librairies
import React from 'react';
import { NavLink } from 'react-router-dom';

// Components
import classes from './NavigationItem.module.css';

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

export default NavigationItem;

et de 'Contact.js'

// Librairies

import React from 'react';
import { Link, Outlet } from 'react-router-dom';
import classes from './Contact.module.css';
import routes from '../../Config/Routes/Routes';

function Contact() {
  // METHODES

  return (
    <>
      <h1>Contact</h1>
      <p>Par quel moyen de contact souhaitez-vous échanger ?</p>
      <Link
        to={routes.CONTACT + routes.EMAIL}
        className={classes.button}>
        Email
      </Link>
      <Link
        to={routes.CONTACT + routes.TELEPHONE}
        className={classes.button}>
        Téléphone
      </Link>
      <Outlet />
    </>
  );
}

export default Contact;

Antoine Delamare

Le 09/03/2023 à 14:46

Ou peut se trouver l'erreur svp ? Merci par avance !

Louis-Nicolas Leuillet

Le 10/03/2023 à 12:47

Tu n'as pas vraiment le même code que moi. J'imbrique mes routes dans le composant Contact, pas dans le composant Route sur le routeur de Contact.

<Route exact path="/" component={Home} />
          <Route path="/contact" component={Contact} />
          <Route exact path="/articles" component={Articles} />
          <Route exact path="/articles/:id" component={Article} />
          <Route render={() => <h1>404</h1>} />

Antoine Delamare

Le 10/03/2023 à 17:14

Ok ! Quelles seraient les meilleures suggestions pour modifier mon code et permettre de faire apparaitre le surlignage de 'Contact' en cliquant sur 'Téléphon' ou 'Email' stp ?

// Librairies
import React, { useState, useEffect } from 'react';
import './App.css';
import { Routes, Route } from 'react-router-dom';
import routes from './Config/Routes/Routes';
import fire from './Config/Firebase/firebase';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

// Components
import Layout from './HOC/Layout/Layout';
import Home from './Containers/Home/Home';
import Contact from './Components/Contact/Contact';
import Articles from './Containers/Articles/Articles';
import Article from './Containers/Articles/Article/Article';
import ManageArticle from './Containers/Admin/ManageArticles/ManageArticles/ManageArticle';
import Authentification from './Containers/Security/Authentification/Authentification';

function App() {
  // STATES
  // State 1 - User
  const [user, setUser] = useState('');

  // CYCLE DE VIE
  // ComponentDidMount
  useEffect(() => {
    authListener();
  }, []);

  // METHODES
  // Méthode 1 - Ecoute de l'authentification de l'user
  const authListener = () => {
    // Appel de l'user
    const auth = getAuth(fire);

    // Check de l'user enregistré
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setUser(user);
      } else {
        setUser('');
      }
    });
  };

  // JSX
  return (
    <div className='App'>
      <Layout user={user}>
        <Routes>
          <Route exact path={routes.HOME} element={<Home />} />
          <Route path={routes.CONTACT} element={<Contact />}>
            <Route
              exact
              path={routes.EMAIL}
              element={<p>exemple@exemple.com</p>}
            />
            <Route
              exact
              path={routes.TELEPHONE}
              element={<p>06 06 06 06 06</p>}
            />
          </Route>
          <Route
            exact
            path={routes.ARTICLES}
            element={<Articles />}
          />
          <Route
            path={routes.ARTICLES + '/:slug'}
            element={<Article user={user} />}
          />
          {user ? (
            <Route
              exact
              path={routes.MANAGE_ARTICLE}
              element={<ManageArticle />}
            />
          ) : null}
          {!user ? (
            <Route
              exact
              path={routes.AUTHENTIFICATION}
              element={<Authentification />}
            />
          ) : null}
          <Route path='*' element={<h1>Erreur 404</h1>} />
        </Routes>
      </Layout>
    </div>
  );
}

export default App;

Louis-Nicolas Leuillet

Le 13/03/2023 à 08:02

Le problème ici c'est que tes routes s'effacent entre-elles, tu perds donc la détection et le surlignage de ta page. Il y a plusieurs solutions, la plus simple étant d'extraire tes routes comme ce que je montre : sur le composant Contact.

Sinon, tu peux aussi détecter directement sur la navigation la page qui est actuellement affichée, et ainsi dire que "si la page commence par "/contact" on surligne.

Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le 7 mars 2023 20:16

Dernière activité le 7 mars 2023 20:16

Cours : Créez des sites internet interactifs avec React 16 et Redux