Pomoc w aktualizacji react-router-dom 6: Wszystkie komponenty potomne <Tras> musi być <Trasami><Trasy> lub <Trasą>Fragment>

Question 1

Nasza aplikacja niedawno został zaktualizowany do wersji beta react-router-dom i wszystko było w porządku. Następnie, gdy próbuję zaktualizować do wersji 6.0.2, otrzymuję wiele инвариантных błędów o All component children of <Routes> must be a <Route> or <React.Fragment>. Jest to związane z tym, że nasze trasy są zdefiniowane w następujący sposób:

Cecha.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 */
];

Aplikacja.jsx:

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

Teraz to prowadzi do błędu wyżej, bo wewnętrzne trasy (np. FeatureRoutes) ujęte w funkcjonalny składnik. Próbowałem odzyskać dosłowne JSX, ale potem dostał jeszcze jeden błąd. Nie jestem pewien, jak to naprawić: czy jedyną odpowiedzią całkowicie przepisać to, jak oceniamy nasze trasy? Mamy również kilka tras, które przechowywane są w tle i porównywane z własnymi składnikami-znowu, nie jestem pewien, jak mogę je owinąć, teraz nie wolno mi mieć komponent między trasami i trasy.

Wszelkie porady mile widziane.

Question 2

Wierzę, że mały prostokąt ponownie doprowadzi do renderowania aplikacji.

W routes zmiana nazwy tablicy component Dla Component w ten sposób, to może być jest renderowane jako składnik React, czyli jak poprawnie nazwany składnik React (PascalCased).

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

Przy sporządzaniu mapy routes wizualizację Component wychodząc na Route składnik element zawieszenie jak JSX.

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

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

Wierzę, że mały prostokąt ponownie doprowadzi do renderowania aplikacji.

W routes zmiana nazwy tablicy component Dla Component w ten sposób, to może być jest renderowane jako składnik React, czyli jak poprawnie nazwany składnik React (PascalCased).

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

Przy sporządzaniu mapy routes wizualizację Component wychodząc na Route składnik element zawieszenie jak JSX.

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

Pomoc w aktualizacji react-router-dom 6: Wszystkie komponenty potomne <Tras> musi być <Trasami><Trasy> lub <Trasą>Fragment>

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii