Reagire-router-dom 6 aggiornamento della guida: Tutti i componenti che sono figli di <Rotte> deve essere un <Percorso> o <Reagire.Frammento>

Question 1

La nostra applicazione recentemente aggiornato per le versioni beta di reagire-router-dom, e le cose erano belle. Poi quando cerco di aggiornamento 6.0.2, ho un sacco di invariante errori su All component children of <Routes> must be a <Route> or <React.Fragment>. Questo perché noi abbiamo i nostri percorsi definiti come segue:

Funzione.jsx:

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

i percorsi.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>

Ora questo genera l'errore di cui sopra, perché l'interno di percorsi (per esempio FeatureRoutes) e ' avvolto in una componente funzionale. Ho cercato di restituire il valore letterale JSX ma poi prendi un altro errore. Io non sono sicuro di come risolvere questo problema: è l'unica risposta completamente riscrivere come possiamo definire le nostre vie? Abbiamo anche alcune rotte che vengono memorizzati nel back-end e la mappa per componenti personalizzati - ancora non sono sicuro di come posso avvolgere questi ora non mi è permesso di avere un componente tra i Percorsi e la Rotta.

Qualsiasi consiglio è apprezzato.

Question 2

Credo che un piccolo refactoring si ottiene la vostra app di nuovo il rendering.

Nel routes array rinominare component per Component così può essere reso come Reagire componente, vale a dire come correttamente denominato Reagire componente (PascalCased).

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

Quando la mappatura routes rendere il Component sulla Route componente element prop come JSX.

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

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

Credo che un piccolo refactoring si ottiene la vostra app di nuovo il rendering.

Nel routes array rinominare component per Component così può essere reso come Reagire componente, vale a dire come correttamente denominato Reagire componente (PascalCased).

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

Quando la mappatura routes rendere il Component sulla Route componente element prop come JSX.

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

Reagire-router-dom 6 aggiornamento della guida: Tutti i componenti che sono figli di <Rotte> deve essere un <Percorso> o <Reagire.Frammento>

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria