Réagir-routeur-dom 6 mise à niveau de l'aide: Tous les enfants de <Routes> doit être <Route> ou <Réagir.Fragment>

Question 1

Notre application a récemment mis à jour pour les versions bêta de réagir-routeur-dom, et les choses étaient très bien. Puis, quand j'essaie de mettre à jour 6.0.2, je reçois beaucoup de invariante des erreurs sur l' All component children of <Routes> must be a <Route> or <React.Fragment>. C'est parce que nous avons nos itinéraires définis comme suit:

Fonctionnalité.jsx:

export const FeatureRoutes = () => (
  <Routes>
    <Route path="/" element={<Feature1 />} />
    <Route path="/*" element={<NotFound />} />
  </Routes>
);

les itinéraires.jsx:

export const routes = [
  {
    path: "feature",
    component: FeatureRoutes,
  },
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

App.jsx:

<Routes>
  {routes.map((route) => (
    <Route key={route.path} path={`${pathPrefix}/${route.path}/*`}>
      <route.component />
    </Route>
  ))}
</Routes>

Cela se traduit aujourd'hui dans l'erreur ci-dessus, parce que l'intérieur des voies de communication (par exemple FeatureRoutes) sont enveloppés dans une composante fonctionnelle. J'ai essayé de retourner le littéral JSX mais alors avoir une autre erreur. Je ne suis pas sûr de la façon de résoudre ce problème: la seule réponse est de réécrire complètement la façon dont nous définissons nos routes? Nous avons également des routes qui sont stockées dans le back-end et la carte des composants personnalisés - encore une fois je ne suis pas sûr de savoir comment je peux emballer à maintenant, je ne suis pas autorisé à avoir une composante entre les Routes et les itinéraires.

Tous les conseils appréciés.

Question 2

Je crois qu'un petit refactoriser obtiendrez votre application un nouveau rendu.

Dans le routes tableau renommer component pour Component de sorte qu'il peut être rendu sous forme de Réagir composant, c'est à dire comme un bien nommé Réagir composant (PascalCased).

const routes = [
  {
    path: "feature",
    Component: FeatureRoutes
  }
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

Lors de la cartographie de la routes le rendu de la Component sur le Route du composant element prop comme JSX.

<Routes>
  {routes.map(({ path, Component }) => (
    <Route
      key={path}
      path={`${pathPrefix}/${path}/*`}
      element={<Component />}
    />
  ))}
</Routes>

Drew Reese · Answer 1 · 2021-11-23T16:27:48

Je crois qu'un petit refactoriser obtiendrez votre application un nouveau rendu.

Dans le routes tableau renommer component pour Component de sorte qu'il peut être rendu sous forme de Réagir composant, c'est à dire comme un bien nommé Réagir composant (PascalCased).

const routes = [
  {
    path: "feature",
    Component: FeatureRoutes
  }
  /* lots of other routes, defined the same way: <Route> wrapped in a component */
];

Lors de la cartographie de la routes le rendu de la Component sur le Route du composant element prop comme JSX.

<Routes>
  {routes.map(({ path, Component }) => (
    <Route
      key={path}
      path={`${pathPrefix}/${path}/*`}
      element={<Component />}
    />
  ))}
</Routes>

Réagir-routeur-dom 6 mise à niveau de l'aide: Tous les enfants de <Routes> doit être <Route> ou <Réagir.Fragment>

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie