Méthode alternative react-router-v6

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;