Believemy logo purple
Connexion
Discussions

React-router v6

Image

Bonjour, quelques remarques pour cette session pour les autres étudiants.

 

- On ne peut plus utiliser un composant <Route> sans qu'il soit englober dans un autre composant <Routes>. Vous aurez une erreur dans le navigateur : Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

- Le composant Switch n'existe plus à partir de ReactRouter v6 apparemment, c'est justement le composant Routes qui le remplace. Pensez à l'importer.

- La propriété render est remplacée par element et vous n'avez plus besoin d'y mettre une fonction, le rendu se fera directement avec du JSX visiblement, exemple : <Route path="/contact" element={<p>Contactez moi !</p>}/>

- Pour rendre un composant, la propriété component n'existe plus, on utilise à nouveau element et on met le composant avec les balises, exemple : <Route path="/" element={<Home />}/>

 

J'ai trouvé de l'aide ici : https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v6

 

En espérant que mes recherches serviront à d'autres :)

 

5 réponses
Image
Louis-Nicolas Leuillet
Le 02/07/2022 à 11:53

Merci Benjamin !

Image
Loris Daca
Le 03/08/2022 à 12:41
Merci Benjamin je rajoute la nouvelle syntaxe du code si ca peut aider certain.
<div className="App">
      <Layout>
        <Routes>
          <Route  path="/" element={<Home />}/>
          <Route  path="/articles" element={<Articles />}/>
          <Route  path="/contact" element={<Contact />}/>
        </Routes>
      </Layout>
    </div>
Image
Loris Daca
Le 03/08/2022 à 12:41

import :

import { Routes , Route } from 'react-router-dom';



import Layout from './hoc/layout/layout';
import Home from './containers/home/home';
import Articles from './containers/articles/articles';
import Contact from './components/contact/contact';
Image
NICOLAS PAILLE
Le 14/08/2022 à 16:37

je tiens à remercier Benjamin , louis-nicolas(le formateur) pour leur aides . Ainsi que Loris daca , j'ai aussi un code similaire aux leurs à suggérer.

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

function App() {
return (
<div className="App">
<Routes>
<Route path='/' element={<h1>Welcome</h1>} />
</Routes>
 
<Layout>
Test
</Layout>
</div>
);
}

export default App;

 

Image
Thibaut Lefebvre
Le 13/12/2022 à 10:02

Et enfin vous pouvez également faire ceci dans App.js (comme ça vous gérez les nested routes) : 

<Routes>
    <Route path="/admin" element={<Layout />}>
        <Route index element={<Dashboard />}></Route>
        <Route path="profile" element={<Profile />}></Route>
        <Route path="kyc" element={<KYC />}></Route>
    </Route>
</Routes>

puis dans le comoosant Layout ajouter un Outlet

// libraries
import React from 'react';
import { Outlet } from 'react-router-dom';

// components

export default function Layout(props) {
    return (
        <Outlet />
    )
}
Image
Inscrivez-vous ou connectez-vous pour participer à la discussion.

Informations

Créée le 1 juillet 2022 15:01
Dernière modification le 1 juillet 2022 15:03
Dernière activité le 1 juillet 2022 15:01
Cours : Créez des sites internet interactifs avec React 16 et Redux