Reaccionar-router-dom 6 actualización de la ayuda: de Todos los componentes de los niños de <Rutas> debe ser un <Ruta> o <Reaccionar.Fragmento>

Question 1

Nuestra aplicación se ha actualizado recientemente a la versión beta de reaccionar-router-dom, y las cosas estaban bien. Luego, cuando intento actualizar a 6.0.2, tengo un montón de invariantes errores acerca de All component children of <Routes> must be a <Route> or <React.Fragment>. Esto es porque tenemos nuestras rutas se definen de la siguiente manera:

La característica.jsx:

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

las rutas.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>

Ahora, esto se traduce en que el error anterior, debido a que el interior de rutas (por ejemplo FeatureRoutes) están envueltos en un componente funcional. He intentado devolver el literal JSX pero después otro error. No estoy seguro de cómo resolver este problema: es la única respuesta a re-escribir por completo, ¿cómo definimos nuestras rutas? También tenemos algunas rutas que se almacenan en el back-end y el mapa de componentes personalizados - repito, no estoy seguro de cómo me puede envolver estas ahora no puedo tener un componente entre Rutas y la Ruta.

Cualquier consejo apreciado.

Question 2

Yo creo que una pequeña refactorizar va a tener su aplicación de nuevo el procesamiento.

En el routes matriz de cambiar el nombre de component a Component así que se puede representar como Reaccionar componente, es decir, como una nombrado correctamente Reaccionar componente (PascalCased).

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

Cuando la asignación de la routes representar el Component en el Route del componente element la proposición como JSX.

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

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

Yo creo que una pequeña refactorizar va a tener su aplicación de nuevo el procesamiento.

En el routes matriz de cambiar el nombre de component a Component así que se puede representar como Reaccionar componente, es decir, como una nombrado correctamente Reaccionar componente (PascalCased).

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

Cuando la asignación de la routes representar el Component en el Route del componente element la proposición como JSX.

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

Reaccionar-router-dom 6 actualización de la ayuda: de Todos los componentes de los niños de <Rutas> debe ser un <Ruta> o <Reaccionar.Fragmento>

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría