Believemy logo purple
Connexion
Discussions

probléme avec route

Image

Bonsoir , 

Aprés avoir saisi <Route /> sur vsCode , je suis confronté à ce message d'erreur

.

 

 

2router.ts:5 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>.

    at invariant (router.ts:5:1)

    at Route (components.tsx:147:1)

    at renderWithHooks (react-dom.development.js:16305:1)

    at mountIndeterminateComponent (react-dom.development.js:20074:1)

    at beginWork (react-dom.development.js:21587:1)

    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

    at invokeGuardedCallback (react-dom.development.js:4277:1)

    at beginWork$1 (react-dom.development.js:27451:1)

    at performUnitOfWork (react-dom.development.js:26557:1)

react-dom.development.js:18687 The above error occurred in the <Route> component:

 

    at Route (http://localhost:3000/static/js/bundle.js:39896:11)

    at Layout (http://localhost:3000/static/js/bundle.js:120:16)

    at div

    at App

    at Router (http://localhost:3000/static/js/bundle.js:39911:15)

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:38720:5)

 

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

logCapturedError @ react-dom.development.js:18687

react-dom.development.js:26923 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>.

    at invariant (router.ts:5:1)

    at Route (components.tsx:147:1)

    at renderWithHooks (react-dom.development.js:16305:1)

    at mountIndeterminateComponent (react-dom.development.js:20074:1)

    at beginWork (react-dom.development.js:21587:1)

    at beginWork$1 (react-dom.development.js:27426:1)

    at performUnitOfWork (react-dom.development.js:26557:1)

    at workLoopSync (react-dom.development.js:26466:1)

    at renderRootSync (react-dom.development.js:26434:1)

    at recoverFromConcurrentError (react-dom.development.js:25850:1). 

 

      Es ce que quelqu'un peut m'aider ?

En vous remerciant

 

ps :ci-joint le code .

import React from 'react';
import './App.css';
import Layout from './hoc/Layout/Layout';
import { Route } from 'react-router-dom';

function App() {
return (
<div className="App">
<Layout>
<Route path='/' render={() => <h1>Bienvenue</h1>} />
</Layout>


</div>
);
}

export default App;
 

 

 

 

 

 

 

 

 

 

 

 

6 réponses
Image
Louis-Nicolas Leuillet
Le 15/08/2022 à 16:54

Hello,

Quelle est la version que tu as pour React ?

Image
NICOLAS PAILLE
Le 15/08/2022 à 20:29

Bonjour , j'ai la toute derniére

 

Image
Louis-Nicolas Leuillet
Le 16/08/2022 à 18:25

Je vous recommande d'utiliser la version 5 de React, la version 6 est différente (le cours est en train d'être à jour).

Image
NICOLAS PAILLE
Le 17/08/2022 à 17:01

oui , j ai résolu le probléme graçe à vous et vos utilisateurs qui ont mis des commentaires utiles , ces interventions  m'ont beaucoup aidé. Encore merci. 

ps: j'utilise la version 6

Image
Samuel Camara
Le 14/02/2023 à 19:41

Bonjour je viens d'avoir le même pb j'ai fait les solutions plus haut à savoir installer la verison 5, 6 mais j'ai encore le même pb. J'ai alors tenté de faire ça comme le dit le message d'erreur "Please wrap your <Route> in a <Routes>." mais rien à faire. Auriez vous une solution d'urgence ?? (c'est assez bloquant quand même) 

Image
Samuel Camara
Le 14/02/2023 à 19:49

Bon en attendant j'ai dl les sources suvi d'un npm i, j'espère vraiment que le cours sera à jour..

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

Informations

Créée le 13 août 2022 22:06
Dernière activité le 13 août 2022 22:06
Cours : Créez des sites internet interactifs avec React 16 et Redux