For Believers.

Relative links avec react-routeur-dom V6

Bonjour à tous,

voici le workaround trouvé pour faire fonctionner les lien relatifs avec react-routeur-dom V6

pour le fichier App.js

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

// Composants
import Layout from './hoc/Layout/Layout';
import Home from './Containers/Home/Home';
import Contact from './Containers/Contact/Contact';
import Articles from './Containers/Articles/Articles';
import Article from './Containers/Articles/Article/Article';


function App() {
 
  return (
    <div className="App">
      <Layout>
        <Routes>
          <Route path='/' Component={Home} />
          <Route path='/contact/*' Component={Contact} >
              <Route path='email' element={<p>Email</p>} />
              <Route path='telephone' element={<p>Téléphone</p>} />
          </Route>
          <Route path='/articles' Component={Articles} />
          <Route path='/articles/:id' Component={Article} />
          <Route path="*" element={<h1>404</h1>} />
        </Routes>
      </Layout>
    </div>
  );
}

export default App;

Pour le fichier Contact.js

j'ai utilisé le Hook useLocation pour récupérer le pathname et la regex suivante /\email|\/telephone/ pour palier au problèle de navigation comme ceci :

// Librairies
import React from "react";
import classes from "./Contact.module.css";
import { Outlet, useNavigate, useLocation } from 'react-router-dom';


function Contact() {
   const navigate = useNavigate();
   const location = useLocation();
   const regex = /\/email|\/telephone/;



   // Fonctions
   const emailClickedHandler = () => {
      navigate(location.pathname.replace(regex,'') + '/email', {replace: true});
     
   }

   const callClickedHandler = () => {
      navigate(location.pathname.replace(regex,'') + '/telephone', {replace: true});
   }


   return (
      <>
         <h1>Contact</h1>
         <p>Par quel moyen de contact souhaitez-vous échanger ?</p>
         <button onClick={emailClickedHandler}className={classes.button}>Email</button>
         <button onClick={callClickedHandler} className={classes.button}>Téléphone</button>

         <Outlet />

      </>
   );
}

export default Contact;

Happy Coding à tous

Sébastien Collin

0 réponse

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

Informations

Créée le 29 août 2023 20:03

Dernière activité le 29 août 2023 20:03

Cours : Bienvenue parmi les étudiants de Believemy !