Bud component react

Fermé

Location

MiKalem898 - Modifié le 25 déc. 2021 à 22:52
Whismeril Messages postés 19028 Date d'inscription mardi 11 mars 2003 Statut Non membre Dernière intervention 24 avril 2024 - 26 déc. 2021 à 18:59

Hello,

J'ai changé de pc, et j'ai commencé un nouveau projet, mais en faisant ca:

Mon composant Layout :

const Layout = (props) => {
    return (
        <div>
             
            {props.children}
             
 
            <ToastContainer position='top-center' />
 
        </div>
    );
};

Mon comp Home:

const Home = () => {
    return (
        <>
            test
        </>
    );
};

Et App :

function App(){
  return (
    <div className="App">
      <Layout>
        <Routes>
          <Route exact path={routes.home} component={Home} />
        </Routes>
      </Layout>
    </div>
  );
}

Bien sur la je n'ai mis que la fonction, les import y sont.

Donc, c'est censé m'afficher 'test' mais rien ne s'affiche, pourtant je fais comme ca d'habitube.

A voir également:

Index.tsx:25 matched leaf route at location "/" does not have an element. this means it will render an <outlet /> with a null value by default resulting in an "empty" page.
Office 16 click-to-run extensibility component ✓ - Forum Microsoft Office
Component tv ✓ - Forum Sony
The following component(s) are required to run this program microsoft visual c++ runtime ✓ - Forum Programmation
Prise component sur tv et HDD externe ✓ - Forum TV & Vidéo
Pas d'image TV/DVD en component ✓ - Forum TV & Vidéo

5 réponses

Réponse 1 / 5

MiKalem898
25 déc. 2021 à 23:07

Je viens de voir ca aussi:

index.tsx:24 Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.

Et en francais:

 La route correspondante à l'emplacement "/" n'a pas d'élément. Cela signifie qu'il rendra un <Outlet /> avec une valeur nulle par défaut, ce qui entraînera une page "vide".

Réponse 2 / 5

Whismeril Messages postés 19028 Date d'inscription mardi 11 mars 2003 Statut Non membre Dernière intervention 24 avril 2024 931
26 déc. 2021 à 11:25

Bonjour

je ne fais de javascript, mais comme personne ne t'as répondu pour l'instant, je vais te proposer quelques pistes pour avoir plus de chances de réponses.

D'abord, tu as essayé d'utiliser les baliser de code, c'est très bien, mais comme tu peux le constater le pavé gris, c'est pas ça qui est ça. Voir ce cours tuto pour s'en servir correctement https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, ton message d'erreur indique le fichier index.tsx à la ligne 24 (enfin je suppose) et tu ne nous dit pas si cette ligne est dans le code présenté plus haut, et la quelle c'est.
Et si cette ligne n'est pas déjà présente, tu ne montres pas le code associé.

Ensuite, ça c'est général, la traduction d'anglais vers français ne consiste pas a prendre chaque mot et y mettre une traduction possible, par exemple "render" ne veut pas exactement dire rendra mais plutôt "le rendu sera", de même "leaf route" ne veut certainement pas dire "route" et je pense que la traduction est liée à ce que JS appelle leaf donc une recheche avec ces mots clé "leaf javascrit" s'impose et devine quoi
https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element

Réponse 4 / 5

Whismeril Messages postés 19028 Date d'inscription mardi 11 mars 2003 Statut Non membre Dernière intervention 24 avril 2024 931
26 déc. 2021 à 14:45

Je pense qu'il vaut mieux laisser au lecteur le soin de se faire sa propre idée de la traduction.
Mais mon idée était plus de te montrer de te servir du message d'erreur plutôt qu'essayer de le traduire.

SI ton problème est résolu, merci de marquer la discussion comme telle

MiKalem898 Messages postés 2 Date d'inscription dimanche 26 décembre 2021 Statut Membre Dernière intervention 26 décembre 2021
26 déc. 2021 à 15:23

Merci ! En fait moi j'avais fais:

<div className="App">
      <Layout>
        <Routes>
          <Route exact path={routes.home} component={Home} />
        </Routes>
      </Layout>
    </div>

Comme d'habitube quoi, j'avais aussi essayé avec element, comme j'avais lu qlq part:

<div className="App">
      <Layout>
        <Routes>
          <Route exact path={routes.home} element={Home} />
        </Routes>
      </Layout>
    </div>

Et grace a ton lien je viens de me rendre compte qu'il fallait ajouter "</>":

<div className="App">
      <Layout>
        <Routes>
          <Route exact path={routes.home} element={<Home />} />
        </Routes>
      </Layout>
    </div>

Discussions similaires

problème carte mère CMOS checksum error...

Activer une carte SIM sur Mobile.free.fr/moncompte

Redirection PHP (redirect header)

audio lecture vidéo

Probleme de lecture video avec Firefox

"Inspecter éléments"

Discussions similaires

Newsletters