React-router-dom 6 upgrade nápověda: Všechny součásti, děti <Trasy> musí být v <Cesta> nebo <Reagovat.Fragment>

Question 1

Naše aplikace nedávno aktualizován na beta verze react-router-dom, a všechno bylo v pohodě. Pak, když jsem se snažit, aby aktualizace 6.0.2, já si spoustu invariantní chyby o All component children of <Routes> must be a <Route> or <React.Fragment>. Je to proto, že máme naše trasy definována takto:

Funkce.jsx:

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

tras.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>

To nyní výsledky v chybové výše, protože vnitřní cesty (např. FeatureRoutes) jsou zabalené ve funkční součásti. Snažil jsem se vracel doslova JSX, ale pak se další chyba. Nejsem si jistý, jak to napravit: je to jen odpověď na zcela přepsat, jak definujeme naší trasy? Máme také některé trasy, které jsou uloženy na back-end a mapu do vlastních komponent - opět si nejsem jistá, jak můžu zabalit teď nesmím mít složku mezi trasy a Trasy.

Nějakou radu ocenila.

Question 2

Věřím, že malé refaktorovat bude mít vaše aplikace vykreslování znovu.

V routes pole přejmenovat component k Component takže to může být vyjádřen jako Reagovat součást, tj. jako správně pojmenované Reagovat součást (PascalCased).

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

Při mapování routes vykreslení Component na Route komponenty element prop jako JSX.

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

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

Věřím, že malé refaktorovat bude mít vaše aplikace vykreslování znovu.

V routes pole přejmenovat component k Component takže to může být vyjádřen jako Reagovat součást, tj. jako správně pojmenované Reagovat součást (PascalCased).

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

Při mapování routes vykreslení Component na Route komponenty element prop jako JSX.

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

React-router-dom 6 upgrade nápověda: Všechny součásti, děti <Trasy> musí být v <Cesta> nebo <Reagovat.Fragment>

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii