Reagovať-router-dom 6 upgrade pomôcť: Všetky zložky deti <Trasy> musí byť <Cesta> alebo <Reagovať.Fragment>

Question 1

Naša aplikácia nedávno aktualizované beta verzie reagovať-router-dom, a veci, ktoré boli v poriadku. Potom, keď sa snažím aktualizovať 6.0.2, mám veľa nemenné chyby týkajúce sa All component children of <Routes> must be a <Route> or <React.Fragment>. Je to preto, že máme trasy definované takto:

Funkcia.jsx:

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

trasy.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 teraz výsledky v chybovom vyššie, pretože vnútorné trasy (napríklad FeatureRoutes) sú zabalené v funkčné zložky. Snažil som sa vracia doslovný JSX ale potom si inú chybu. Nie som si istý, ako to opraviť: je len odpoveď na úplne prepísať ako definujeme naše cesty? Máme aj niektoré cesty, ktoré sú uložené v back-end a mapa na vlastné komponenty - opäť nie som si istý, ako môžem zabaliť tieto teraz nie som si dovolil mať komponentu medzi Trasy a Trasu.

Akékoľvek rady ocenili.

Question 2

Verím, že malé refactor bude mať vaše aplikácii vykresľovanie znova.

V routes premenovať pole component na Component tak to môže byť vydaný ako Reagovať komponentu, t. j. ako správne pomenovaný Reagovať komponent (PascalCased).

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

Keď mapovanie routes prekreslenie Component na Route komponenty element prop ako JSX.

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

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

Verím, že malé refactor bude mať vaše aplikácii vykresľovanie znova.

V routes premenovať pole component na Component tak to môže byť vydaný ako Reagovať komponentu, t. j. ako správne pomenovaný Reagovať komponent (PascalCased).

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

Keď mapovanie routes prekreslenie Component na Route komponenty element prop ako JSX.

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

Reagovať-router-dom 6 upgrade pomôcť: Všetky zložky deti <Trasy> musí byť <Cesta> alebo <Reagovať.Fragment>

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii