Discussions

Méthode alternative react-router-v6

Image

Alors là j'ai fait complètement autre chose car ca ne fonctionne plus du tout avec la v6.

Mais je trouve ça bcp plus simple !

 

Dans mon App.js j'imbrique mes routes comme ceci :

// Lib
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 Articles from '../Articles/Articles';
import Contact from '../../Components/Contact/Contact';
import Article from '../Articles/Article/Article';

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

export default App;

 

Ensuite dans mon Contact.js, je fais appel au composant Link et Outlet (que j'importe de react-router-dom). Outlet permet de rendre l'element de la route. Cela donne :

 

import React from "react";
import { Link, Outlet } from "react-router-dom";
import classes from "./Contact.module.css";

function Contact() {

    return (
        <>
            <h1>Contact</h1>
            <Link to="/contact/email" className={classes.button}>Email</Link>
            <Link to="/contact/phone" className={classes.button}>Téléphone</Link>
            <Outlet />
        </>
    )
}

export default Contact;
7 réponses
Image
Raven
Le 07/07/2022 à 13:32

Ça évite aussi de traîner des routes dans plein de composants. Toutes les routes reste dans mon App.js. Peut-être plus simple pour la maintenabilité à long terme ?

Image
Louis-Nicolas Leuillet
Le 07/07/2022 à 20:21

Peut-être, je préfère NextJS pour les routes !

Image
Raven
Le 08/07/2022 à 10:38

NextJS : ce sera ma formation suivante sur Believemy :D

Image
Eric Sermande
Le 29/08/2022 à 15:49

Raven tu ma devancé sur cette parti, j 'allais te poser la question pour l'email et le téléphone et je vois que tu viens de publier la solution, dans le cour la methode render ne fonctionne pas, l alternative que tu a publier est plus claire je teste et je te dit si sa fonctionne pour moi.

Image
Eric Sermande
Le 29/08/2022 à 15:51

moi je suis inscrit sur le programe Rocket hate de comencer, en attendant je m'exerce un peut par ici.

Image
Eric Sermande
Le 30/08/2022 à 12:55

salut, je fais un peti retour sur ta solution:

j'ai voulu garder les boutton avec la methode onClik mais sa fonctionnais pas, en passant par Link sa fonctionne nickel juste modifier le css pour donner l apparence d'un button. encore merci a toi!! 

Image
Raven
Le 30/08/2022 à 17:09

Avec plaisir !

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

Informations

Créée le 7 juillet 2022 13:30
Dernière modification le 7 juillet 2022 13:39
Dernière activité le 7 juillet 2022 13:30