Reacționează-router-dom 6 upgrade ajutor: Toate componentă copii de <Rute> trebuie să fie un <Rută> sau <Reacționa.Fragment>

Question 1

Aplicația noastră actualizat recent la versiunile beta de a reacționa-router-dom, și lucrurile au mers bine. Atunci când încerc să-update la 6.0.2, am obține o mulțime de invariante despre erori All component children of <Routes> must be a <Route> or <React.Fragment>. Acest lucru este pentru că avem rute definite după cum urmează:

Caracteristică.jsx:

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

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

Acum rezultate în eroare de mai sus, pentru interior rute (de exemplu FeatureRoutes) sunt învelite într-o componentă funcțională. Am incercat revenirea literală JSX dar apoi a obține o altă eroare. Nu sunt sigur cum de a repara acest lucru: este singurul răspuns pentru a rescrie complet modul în care ne definim rute? Avem, de asemenea, unele rute care sunt stocate în back-end și harta pentru componentele personalizate - din nou nu sunt sigur cum aș putea încheia aceste acum nu am voie să aibă o componentă între Trasee și Rute.

Orice sfat apreciat.

Question 2

Eu cred ca un mic refactor va primi aplicația de redare din nou.

În routes matrice redenumi component pentru a Component astfel încât acesta poate fi redat ca un Reacționa componentă, și anume ca un numit în mod corespunzător Reacționa componentă (PascalCased).

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

Când cartografiere routes face Component pe Route componenta element prop ca JSX.

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

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

Eu cred ca un mic refactor va primi aplicația de redare din nou.

În routes matrice redenumi component pentru a Component astfel încât acesta poate fi redat ca un Reacționa componentă, și anume ca un numit în mod corespunzător Reacționa componentă (PascalCased).

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

Când cartografiere routes face Component pe Route componenta element prop ca JSX.

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

Reacționează-router-dom 6 upgrade ajutor: Toate componentă copii de <Rute> trebuie să fie un <Rută> sau <Reacționa.Fragment>

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie